优先用 typeof SVGFilterElement !== 'undefined' 判断 SVG 滤镜基础支持，Safari 9–13.1 需额外测试 feGaussianBlur 渲染生效性；IE 完全不支持；内联 filter 属性比 CSS filter 更稳定；feConvolveMatrix 等高开销原语在 iOS 易失效，建议 fallback 至 CSS blur 或预渲染 PNG。
怎么判断当前浏览器是否支持 SVG 滤镜
直接查 SVGFilterElement 构造函数是否存在，比查 filter CSS 属性更可靠——因为 CSS filter 属性在部分旧版浏览器（如 IE）里有实现但不支持 SVG 内联滤镜。
实操建议：
- 用
typeof SVGFilterElement !== 'undefined'判断基础支持（Chrome 45+、Firefox 35+、Safari 9+ 支持） - 对 Safari 9–13.1，需额外测试：创建一个带
<fegaussianblur></fegaussianblur>的临时<filter></filter>并尝试应用到<rect></rect>，再用getComputedStyle检查渲染是否生效（Safari 13.1 及之前存在滤镜被静默忽略的问题） - IE 完全不支持 SVG 滤镜（包括
<filter></filter>元素和filter属性），SVGFilterElement为undefined
SVG 滤镜在 CSS 和内联用法中的兼容差异
CSS 中的 filter 属性（如 filter: url(#myblur)）和 SVG 内联 filter 属性（如 <circle filter="url(#myblur)"></circle>）底层依赖相同机制，但触发条件不同，导致兼容表现不一致。
常见错误现象：页面在 Chrome 正常，在 Safari 上滤镜完全不生效，控制台也无报错。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先使用内联
filter属性（<g filter="url(#f)"></g>），它比 CSSfilter在 Safari 中更稳定 - 避免对 SVG 元素同时设置 CSS
filter和内联filter，Safari 会优先忽略内联值 - 若必须用 CSS
filter，确保目标元素是 HTML 元素（如<div> 包裹 <code><svg></svg>），而非 SVG 子元素本身哪些滤镜原语在移动端容易失效
<feconvolvematrix></feconvolvematrix>、<fedisplacementmap></fedisplacementmap>、<feturbulence></feturbulence>这三类在 iOS Safari（尤其是 iOS 15–16）中极易被禁用或降级为透明输出，不是 bug，而是 WebKit 主动限制高开销滤镜以保性能。使用场景：做动态水波纹、噪点纹理、自定义卷积锐化等效果时需特别注意。
实操建议：
- 用
<fegaussianblur></fegaussianblur>或<feoffset></feoffset>替代<feconvolvematrix></feconvolvematrix>实现模糊/阴影，兼容性好且性能可控 - 避免在
<fedisplacementmap></fedisplacementmap>中引用外部<image></image>，iOS 会拒绝加载；改用内联<feturbulence></feturbulence>生成位移图（但要注意 iOS 16.4+ 才修复其随机种子问题） - 上线前务必在真机（特别是 iPhone 12/13 + iOS 15.7/16.3）上验证滤镜输出是否为全透明或黑块
如何安全 fallback 到 CSS 滤镜或纯色替代
不能只靠
@supports (filter: url(#f))，这个语法在 Safari 中永远返回 false —— 它不识别 SVG URL 语法的@supports检测。性能影响：强行用 JS 检测并切换样式可能引发重排，尤其在动画中。
实操建议：
- 用
document.createElementNS('http://www.w3.org/2000/svg', 'filter').hasOwnProperty('x')快速探测 SVG 滤镜能力（比构造实例轻量） - fallback 时优先用 CSS
filter: blur(2px)而非opacity: 0.9，前者视觉更接近，且现代浏览器都支持 - 对关键图形（如品牌 logo），保留一份预渲染的 PNG 替代方案，通过
<image xlink:href="logo-blur.png"></image>插入，绕过所有运行时滤镜逻辑
真正麻烦的是
<fecomposite></fecomposite>和<feblend></feblend>的混合模式——它们在 Android WebView 里行为不一，连mode="multiply"都可能被当普通叠加处理。这种地方别省事，得实机逐个测。 - 用
