SVG滤镜通过feTurbulence生成噪声、feDisplacementMap映射到描边路径实现不规则边框形变，需设stroke与fill="none"、overflow:visible，并用@property桥接CSS动画驱动参数。
SVG滤镜怎么给CSS边框加不规则形变
直接用 border 画不出锯齿、波浪或随机抖动的边框，得靠 SVG 滤镜把轮廓“扰动”起来。核心是用 feTurbulence 生成噪声，再用 feDisplacementMap 把它映射到元素轮廓上——不是加在背景上，而是作用于描边路径本身。
常见错误是把滤镜套在容器上却忘了设置 overflow: visible，或者没给目标元素加 stroke 和 fill="none"，结果位移只影响填充区域，边框纹丝不动。
- 滤镜必须定义在
<defs></defs>内，且通过url(#id)引用，不能内联写 -
feDisplacementMap的in要设为"SourceGraphic"，in2指向噪声图层（比如feTurbulence的输出） - 动画关键帧只能驱动滤镜参数（如
baseFrequency），不能直接 animate SVG 元素——否则会触发重排，卡顿明显
CSS关键帧如何驱动SVG滤镜参数
CSS 动画没法直接改 SVG 滤镜的属性值，得用 @property + 自定义属性桥接。比如想让波纹幅度随时间变化，先声明 @property --freq { syntax: "<number>"; inherits: false; initial-value: 0.02; }</number>，再在滤镜里用 baseFrequency="var(--freq) var(--freq)"。
不这么做的话，浏览器会静默忽略滤镜中的 CSS 变量，边框看起来完全不动——连报错都没有，特别难排查。
立即学习“前端免费学习笔记（深入）”；
- 必须加
inherits: false，否则 SVG 滤镜节点无法继承自定义属性值 -
baseFrequency值越小，波纹越宽缓；超过 0.1 就容易碎成噪点，看不出“边框形变”，只剩闪烁 - 动画 duration 控制在 3–8s 比较安全，太短会让位移突兀，太长人眼感知不到变化
为什么border-radius失效或动画撕裂
用了 SVG 滤镜后，border-radius 通常不起作用——因为滤镜操作的是原始几何轮廓，不是渲染后的圆角边界。真正生效的是 clip-path 或 SVG <path></path> 的 d 属性。
另一个高频问题是动画过程中出现边缘撕裂，尤其在 Safari 上。这不是代码写错了，是硬件加速策略导致：滤镜默认不进合成层，位移计算被丢帧。
- 强制提升图层：给元素加
transform: translateZ(0)或will-change: filter - 避免在滤镜中叠加多个
feDisplacementMap，两次位移叠加极易溢出坐标系，造成边缘像素丢失 - 如果只要局部不规则（比如只动顶部边框），别对整个元素滤镜，改用 SVG
<mask></mask>配合 CSS 动画更可控
兼容性与降级怎么处理
Firefox 对 feDisplacementMap 的 scale 支持不稳定，Chrome 和 Safari 表现一致但旧版 Edge 完全不支持。没有优雅降级方案，只能检测后切换回纯 CSS 动画边框（比如 box-shadow 扩散+透明度抖动）。
用 @supports (filter: url(#f)) 判断不可靠——它只测语法，不测滤镜是否真能执行。稳妥做法是 JS 检测：document.createElementNS("http://www.w3.org/2000/svg", "filter").hasOwnProperty("x")，再配合 requestAnimationFrame 观察首帧是否渲染成功。
- 移动端 iOS 15.4+ 才完整支持
@property驱动滤镜，之前版本需 fallback 到 JS 定时修改style.setProperty - 别在
:hover里动态插入滤镜定义，Safari 会漏掉首次 hover 的动画 - 滤镜 ID 必须全局唯一，重复 ID 在 Firefox 中会导致整个滤镜失效，且无提示
最麻烦的其实是调试：滤镜效果无法用 DevTools 实时编辑，每次改参数都得刷新。建议把 baseFrequency、scale、numOctaves 提成独立 CSS 变量，用控制台一行 el.style.setProperty("--freq", "0.03") 迭代，比反复改 SVG 快得多。
