SVG动画在Firefox无法运行，Chrome与Safari可正常运行求助

我帮你排查了这个SVG动画在Firefox里的问题，核心原因是当前实现的大量内联SVG资源+低效的旋转方式导致Firefox渲染压力过载，下面是具体分析和修复方案：

问题根源分析 #

• 你通过循环生成了数十个独立的内联SVG作为background-image的多URL值，Firefox对这种大量内联SVG资源的解析和渲染性能远不如Chrome/Safari，直接导致卡顿甚至无响应
• SVG内部设置了height="5000" width="5000"的超大尺寸，完全没必要（viewBox已经定义了200x200的坐标系统），进一步加重了渲染负担
• 把旋转逻辑写在SVG的style属性里，这种方式在Firefox中会触发多次重绘，动画效率极低

修复方案 #

我们可以通过合并SVG资源、优化尺寸、调整动画逻辑三个步骤解决问题：

1. 修改JS代码：生成单个SVG包含所有旋转线条 #

不再生成多个独立SVG，而是在一个SVG里用<g>标签包裹所有旋转后的线条，这样只需要一个background-image资源：

var all = document.querySelectorAll('.circle');
for (var i = 0; i < all.length; i++) {
  var c = all[i].getAttribute("data-color");
  var s = parseInt(all[i].getAttribute("data-step"));
  // 构建单个SVG，包含所有旋转的线条
  var svgLines = '';
  var end = 180 / s;
  for (var j = 0; j < end; j++) {
    svgLines += `<g transform="rotate(${s * j} 100 100)">
                  <line x1="100" y1="0" x2="100" y2="200" stroke="${c}" stroke-width="0.03" />
                </g>`;
  }
  // 生成单个SVG的data URL，去掉不必要的超大尺寸
  var b = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">${svgLines}</svg>')`;
  all[i].style.setProperty("--b", b);
  all[i].querySelector('span').style.setProperty("background", c);
}

$(document).ready(function(){
  $("span").css("background-color","white");
  $( document ).trigger( "click" );
});

2. 优化CSS动画：直接旋转伪元素 #

把动画从SVG内部转移到伪元素上，减少SVG内部的渲染开销：

/* 只修改.circle:after相关的动画部分，其余CSS保持不变 */
.circle:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: -5000%;
  left: -5000%;
  right: -5000%;
  bottom: -5000%;
  background-image: var(--b);
  background-size: 100% 100%;
  /* 直接旋转伪元素，替代SVG内部的旋转 */
  animation: animate 90s infinite linear;
  opacity: 0.8;
}

@keyframes animate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

3. 额外优化点 #

• 去掉所有SVG中的height="5000"和width="5000"属性，viewBox已经足够定义坐标系统，浏览器会自动适配尺寸
• 确保stroke-width的单位统一（你之前尝试加px，其实这里用相对值更合适，因为viewBox是200x200，0.03的stroke-width已经足够细）

效果验证 #

修改后的代码会把数十个SVG合并成一个，大幅减少Firefox的资源解析压力，同时动画逻辑更高效，既保持Chrome/Safari的正常运行，也能在Firefox中流畅渲染。

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