Chrome浏览器滚动后SVG循环动画停止问题求助

问题分析 #

Chrome浏览器对通过<img>标签加载的外部SVG有特定优化逻辑：当SVG元素脱离视口时，会暂停其内部动画；重新进入视口时，部分场景下无法自动恢复播放，导致动画停止。Opera未出现此问题是因为浏览器内核的资源调度策略不同。

可行解决方案 #

1. 改用Inline SVG嵌入 #

将SVG代码直接嵌入HTML文档，而非通过<img>引用外部文件。这种方式下，SVG动画的控制权完全在页面中，Chrome不会随意暂停动画。
示例：

<!-- 替换原来的img标签 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- 你的SVG内容和动画代码 -->
  <circle cx="50" cy="50" r="40">
    <animate attributeName="r" from="40" to="20" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

2. 监听视口可见性，强制重启动画 #

使用Intersection Observer API检测SVG是否进入视口，一旦进入就通过克隆元素的方式重启动画。这种方法无需修改SVG嵌入方式，适合无法改用Inline SVG的场景。
实现代码：

// 初始化观察者
const svgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const targetImg = entry.target;
      // 克隆元素替换原元素，触发动画重启
      const clonedImg = targetImg.cloneNode(true);
      targetImg.parentNode.replaceChild(clonedImg, targetImg);
      // 停止观察已处理的元素，避免重复触发
      svgObserver.unobserve(targetImg);
    }
  });
}, { threshold: 0.1 });

// 给所有带动画的SVG img标签添加监听
document.querySelectorAll('img[src$=".svg"]').forEach(img => {
  svgObserver.observe(img);
});

3. 强制设置动画播放状态（需Inline SVG） #

如果使用Inline SVG，可以通过CSS强制动画保持运行状态，避免Chrome暂停：

svg * {
  animation-play-state: running !important;
}

也可以直接在SVG内部的动画元素上添加属性：

<animate attributeName="r" from="40" to="20" dur="2s" repeatCount="indefinite" style="animation-play-state: running" />

4. 调整Img标签加载属性 #

尝试禁用Chrome的惰性加载优化，给<img>标签添加以下属性：

<img src="your-svg-url" loading="eager" decoding="sync">

注：此方法效果有限，仅作为辅助尝试。

推荐方案优先级 #

1. Inline SVG嵌入：最稳定，从根源避免Chrome的动画暂停问题
2. Intersection Observer重启动画：无需修改SVG文件，适配现有嵌入方式

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