SVG路径动画在Chrome/Firefox正常，Edge/IE失效，求排查问题原因

我帮你分析下代码里的问题，以及对应的修复方案——毕竟IE和旧版Edge（EdgeHTML内核）对SVG CSS动画的支持确实有不少坑：

代码里的主要问题 #

• 无效的-ms-transform声明：你写了-ms-transform: dash 2s forwards infinite;，但dash根本不是transform属性的合法值，这行代码完全没用，反而可能让旧浏览器混淆渲染逻辑，直接删掉就行。
• CSS动画兼容性问题：IE和旧Edge对CSS动画控制SVG的stroke-dashoffset支持很有限，尤其是forwards和infinite组合的动画，浏览器可能无法正确解析这个动画行为。
• 硬编码的stroke-dasharray值：你直接写了1000，但这个值不一定和你的实际路径长度匹配，不仅会导致动画效果不准确，也可能加剧兼容问题。

方案1：优化CSS动画，提升兼容性 #

先移除无效代码，调整动画写法，同时用JS动态获取路径长度（避免硬编码的误差）：

/* 移除无效的-ms-transform，简化动画声明 */
.pathNivel1, .pathNivel2 {
  stroke-dasharray: var(--path-length); /* 用CSS变量存储路径实际长度 */
  stroke-dashoffset: var(--path-length);
  animation: dash 2s linear forwards infinite;
  /* 针对旧浏览器补充前缀 */
  -webkit-animation: dash 2s linear forwards infinite;
  -ms-animation: dash 2s linear forwards infinite;
}

@-ms-keyframes dash {
  to { stroke-dashoffset: 0; }
}
@-webkit-keyframes dash {
  to { stroke-dashoffset: 0; }
}
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

/* 你的原有样式保持不变 */
.cls-2, .cls-3, .cls-4, .cls-7, .cls-8 { fill: none; }
.cls-2 { stroke: #497faa; }
.cls-3 { stroke: #69c; }
.cls-2, .cls-3, .cls-4, .cls-8 { stroke-linecap: round; stroke-linejoin: round; }
.cls-2, .cls-3, .cls-4 { stroke-width: 65px; }

添加JS动态计算路径长度：

// 页面加载后自动获取路径长度并设置CSS变量
window.addEventListener('load', function() {
  document.querySelectorAll('.pathNivel1, .pathNivel2').forEach(path => {
    const actualLength = path.getTotalLength();
    path.style.setProperty('--path-length', actualLength);
  });
});

方案2：用SMIL动画彻底兼容IE/旧Edge #

如果要覆盖IE9+和旧Edge，SVG原生的SMIL动画是更可靠的选择（这类浏览器对SMIL的支持比CSS动画更好）：

修改SVG代码，直接在路径内添加动画标签：

<svg xmlns="http://www.w3.org/2000/svg" width="275" height="470.85">
  <g>
    <path class="cls-3 pathNivel2" d="m39.200012,153.566565a82.68,82.68 0 0 1 82.67,82.68">
      <!-- SMIL动画：控制stroke-dashoffset从路径长度到0，循环播放 -->
      <animate 
        attributeName="stroke-dashoffset"
        from="0"
        to="0"
        dur="2s"
        repeatCount="indefinite"
        fill="freeze"
      />
    </path>
  </g>
</svg>

同样用JS动态设置路径长度（确保动画准确）：

window.addEventListener('load', function() {
  const path = document.querySelector('.pathNivel2');
  const actualLength = path.getTotalLength();
  // 设置CSS的dash参数
  path.style.strokeDasharray = actualLength;
  path.style.strokeDashoffset = actualLength;
  // 同步更新SMIL动画的起始值
  const animateTag = path.querySelector('animate');
  if (animateTag) {
    animateTag.setAttribute('from', actualLength);
    animateTag.setAttribute('to', 0);
  }
});

总结 #

如果你的用户群体还在使用IE或旧Edge，SMIL动画是最稳妥的方案；如果只需要兼容Chromium版Edge，优化后的CSS动画就足够。记得一定要删掉那行无效的-ms-transform代码，它只会添乱。

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