本文详解 SVG 滤镜引用错误导致移动端（iOS Safari / Android Chrome）渲染失败的问题，并提供可立即生效的修复方法与最佳实践。
本文详解 svg `
SVG 滤镜效果在桌面端正常、却在移动浏览器中完全不可见，是前端开发中一个隐蔽但高频的问题。根本原因往往并非代码逻辑或响应式适配问题，而是 SVG 滤镜定义中存在无效的中间结果引用——正如本例所示：原始代码中
✅ 正确修复：修正 in2 引用并补充关键属性
将错误的 in2="goo" 改为已正确定义的 in2="blur"，同时建议补充 viewBox 属性以确保跨设备缩放一致性：
<svg id="svg" viewbox="0 0 830 1080" xmlns="https://www.w3.org/2000/svg"><filter id="round"><fegaussianblur in="SourceGraphic" stddeviation="10" result="blur"></fegaussianblur><!-- ✅ 修正：in2 指向真实存在的 result="blur" --><fecomposite in="SourceGraphic" in2="blur" operator="atop"></fecomposite><feturbulence type="turbulence" basefrequency="0.01" numoctaves="1" result="turbulence"></feturbulence><fedisplacementmap in2="turbulence" in="SourceGraphic" scale="300" xchannelselector="R" ychannelselector="G"></fedisplacementmap></filter><polygon id="polygonA" stroke="crimson" stroke-width="7" fill="none" filter="url(#round)"></polygon><polygon id="polygonB" stroke="darkolivegreen" stroke-width="7" fill="none" filter="url(#round)"></polygon></svg>
? 为什么移动端更敏感？
iOS Safari 和部分 Android WebView 对 SVG 滤镜规范遵循更严格（尤其是 SVG 1.1/2 混合解析），遇到未定义的 in2 值会直接中断滤镜执行，而非降级处理；而桌面 Chrome 可能容忍该错误并回退到基础渲染，造成“看似正常”的假象。
⚠️ 其他关键注意事项
-
避免重复 appendChild()：原 JS 中每次调用 generateA() 或 generateB() 都执行 svg.appendChild(shape)，但
已静态存在于 DOM 中，反复 appendChild() 会导致元素被移出再插入，可能触发重绘异常。应改为仅更新 points 属性： // ✅ 推荐写法（无需 appendChild） shape.setAttribute("points", `${x1} ${y1}, ...`); viewBox 是响应式基石：width/height 属性在移动端易受视口缩放影响，务必配合 viewBox="0 0 830 1080" 使用，确保坐标系稳定且可缩放。
调试技巧：临时移除 filter 属性，验证多边形是否真实绘制；再逐行启用滤镜节点，定位首个失效环节。
✅ 总结
SVG 滤镜跨平台兼容的核心在于语义严谨性：所有 in/in2 必须精确匹配前序 result 值，且优先使用 viewBox 替代固定宽高。一次看似微小的引用错误（如 "goo" → "blur"），即可成为移动端渲染的“隐形杀手”。修复后，该动态多边形生成 + 滤镜变形效果将在 iOS Safari、Chrome for Android 及所有现代桌面浏览器中一致运行。
