桌面端正常的SVG多边形在移动端无法显示的问题排查

核心问题分析 #

1. SVG版本兼容性：你使用了version="2"，但移动端Chrome和Safari对SVG 2的支持极不完善，大部分移动端浏览器仅稳定支持SVG 1.1。
2. 滤镜语法错误：滤镜中<feComposite>引用了不存在的goo结果源，前面的高斯模糊输出是blur，这个错误会导致移动端浏览器直接放弃渲染整个SVG。
3. 冗余DOM操作：每次调用生成函数时重复执行svg.appendChild(shape)，但元素本身已经在SVG内部，重复添加会引发不必要的DOM异常。

具体修复步骤 #

• 移除/修改SVG版本声明：将<svg>标签的version="2"改为version="1.1"，或者直接删除该属性。
• 修复滤镜错误：删除无效的<feComposite>节点，或者补全对应的滤镜节点生成goo结果源（如果原本需要goo效果）。
• 移除冗余DOM操作：删除svg.appendChild(shape)这一行，因为多边形元素已经存在于SVG中，只需修改points属性即可。
• 可选：适配移动端视口：给SVG添加viewBox属性，让SVG能在移动端自适应缩放，比如viewBox="0 0 830 1080"。

修改后的完整代码 #

HTML #

<svg id="svg" width="830" height="1080" viewBox="0 0 830 1080" xmlns="https://www.w3.org/2000/svg">
     <filter id="round">
       <feTurbulence
        type="turbulence"
        baseFrequency="0.01"
        numOctaves="1"
        result="turbulence" />
      <feDisplacementMap
        in2="turbulence"
        in="SourceGraphic"
        scale="300"
        xChannelSelector="R"
        yChannelSelector="G" />
     </filter>
   
    <polygon id="polygonA" stroke="crimson" stroke-width="7" fill="none" filter="url(#round)"/>
    <polygon id="polygonB" stroke="darkolivegreen" stroke-width="7" fill="none" filter="url(#round)"/>    
  </svg>

<button id="btn1">GenerateA</button>
<button id="btn2">GenerateB</button>

JavaScript #

function generateA() {
  function random(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  let x1 = random(0, 830);
  let y1 = random(0, 1080);
  let x2 = random(0, 830);
  let y2 = random(0, 1080);
  let x3 = random(0, 830);
  let y3 = random(0, 1080);
  let x4 = random(0, 830);
  let y4 = random(0, 1080);
  let x5 = random(0, 830);
  let y5 = random(0, 1080);
  let x6 = random(0, 830);
  let y6 = random(0, 1080);
  let x7 = random(0, 830);
  let y7 = random(0, 1080);
  let x8 = random(0, 830);
  let y8 = random(0, 1080);

  let shape = document.getElementById("polygonA");
  shape.setAttribute("points", `${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}, ${x5} ${y5}, ${x6} ${y6}, ${x7} ${y7}, ${x8} ${y8}`);
}

function generateB() {
  function random(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  let x1 = random(0, 830);
  let y1 = random(0, 1080);
  let x2 = random(0, 800);
  let y2 = random(0, 200);
  let x3 = random(0, 830);
  let y3 = random(0, 1080);
  let x4 = random(0, 830);
  let y4 = random(0, 1080);
  let x5 = random(0, 830);
  let y5 = random(0, 1080);
  let x6 = random(0, 830);
  let y6 = random(0, 1080);
  let x7 = random(0, 830);
  let y7 = random(0, 1080);
  let x8 = random(0, 830);
  let y8 = random(0, 1080);

  let shape = document.getElementById("polygonB");
  shape.setAttribute("points", `${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}, ${x5} ${y5}, ${x6} ${y6}, ${x7} ${y7}, ${x8} ${y8}`);
}

generateA();
generateB();

let btn1 = document.getElementById("btn1");
btn1.addEventListener("click", generateA);
let btn2 = document.getElementById("btn2");
btn2.addEventListener("click", generateB);

CSS #

* {
  background-color: burlywood;
}

button {
  display: inline;
  position: static;
  bottom: 1rem;
  right: 1rem;
  background: #111;
  color: #fff;
  padding: 0.5rem 1.75rem;
  border: none;
  cursor: pointer;
}

额外说明 #

如果你原本想实现“gooey”模糊融合效果，需要补全对应的滤镜节点，示例如下：

<filter id="round">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"/>
  <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1" result="turbulence" />
  <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="300" xChannelSelector="R" yChannelSelector="G" />
</filter>

确保所有结果源都存在，避免移动端浏览器报错。

内容的提问来源于stack exchange，提问作者Ian