在ClojureScript中用Rum或Reagent优雅暂停/恢复SVG动画

你提到的CSS animation-play-state: paused; 无效是因为它只针对CSS Animations，而SVG里的<animateTransform>属于SMIL动画体系，这套动画有自己的控制API，和CSS动画完全不互通。至于修改repeatCount为0会重置动画状态，这确实不是我们想要的解决方案——毕竟暂停的核心需求就是保留当前进度。

下面是两种可靠的实现方式，都是直接针对SMIL动画的特性设计的：

1. 精准控制单个动画元素（推荐） #

SVG的动画元素（包括<animateTransform>）本身就提供了pause()和unpause()方法，调用这两个方法可以直接控制单个动画的运行状态，而且会完整保留当前的动画进度：

示例代码 #

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect id="box" x="50" y="50" width="100" height="100" fill="#42b983">
    <animateTransform
      id="rotateAnim"
      attributeName="transform"
      type="rotate"
      from="0 100 100"
      to="360 100 100"
      dur="5s"
      repeatCount="indefinite"
    />
  </rect>
</svg>
<button onclick="toggleAnimation()">暂停/恢复</button>

<script>
const animElement = document.getElementById('rotateAnim');
let isPaused = false;

function toggleAnimation() {
  if (isPaused) {
    animElement.unpause();
  } else {
    animElement.pause();
  }
  isPaused = !isPaused;
}
</script>

点击按钮后，动画会立刻停在当前的旋转角度，再次点击就从该位置继续运行，完全不会丢失任何状态。

2. 一次性控制SVG内所有动画 #

如果你需要暂停整个SVG文档里的所有SMIL动画，可以调用SVG文档对象的pauseAnimations()方法，恢复则用unpauseAnimations()：

const svgDoc = document.querySelector('svg');
// 暂停所有动画
svgDoc.pauseAnimations();
// 恢复所有动画
svgDoc.unpauseAnimations();

额外小提示 #

• 如果你想通过属性而非JS控制，也可以利用SMIL动画的begin和end属性结合事件，但这种方式灵活性远不如JS API，一般只用于简单的触发场景。
• 现代主流浏览器（Chrome、Firefox、Safari、Edge）都已经完善支持这些SMIL动画API，不用担心兼容性问题。

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