如何在指定帧（例如第3帧）停止SVG动画？

方法1：直接修改SVG源文件（无需JS） #

这种方法适合不需要动态控制的场景，直接调整动画属性让它停在目标帧：

1. 用文本编辑器打开你的SVG文件，找到所有动画元素（比如<animate>、<animateTransform>、<animateMotion>）。
2. 确定第3帧对应的时间点：
   • 如果动画用values定义关键帧（比如values="a;b;c;d"对应4帧），假设总时长为dur="0.4s"，那每帧时长是0.1秒，第3帧结束的时间就是0.3s。
3. 修改动画元素的属性：
   • 移除repeatCount="indefinite"（如果有这个属性）。
   • 将dur设置为第3帧对应的时间（比如dur="0.3s"）。
   • 添加fill="freeze"，让动画停在最后一帧的状态。

示例修改后的动画元素：

<animateTransform
  attributeName="transform"
  type="translate"
  values="0,0; 10,0; 20,0; 30,0"
  dur="0.3s"
  fill="freeze"
/>

方法2：用JavaScript动态控制（适合需要交互或动态调整的场景） #

如果SVG嵌入在HTML中（而非用<img>标签引用，因为img无法访问内部DOM），可以用JS精准控制暂停：

1. 在HTML中嵌入SVG，给它加个ID：

<svg id="targetSvg" viewBox="0 0 100 100">
  <!-- 你的SVG内容 -->
</svg>

2. 编写JS代码计算目标帧时间并暂停动画：

// 获取SVG和所有动画元素
const svg = document.getElementById('targetSvg');
const animations = svg.querySelectorAll('animate, animateTransform, animateMotion');

// 假设每帧时长0.1秒，第3帧对应300毫秒
const targetFrameTime = 300; // 单位：毫秒

// 到时间后暂停所有动画
setTimeout(() => {
  animations.forEach(anim => anim.pause());
}, targetFrameTime);

如果需要更精准，可以监听动画的时间更新事件，判断当前进度是否到达第3帧的位置再暂停。

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