SVG非叠加重叠动画跳变异常的原因及中间值计算逻辑咨询

这个现象其实是SVG动画系统中当前值继承规则和动画三明治模型结合工作的正常（但容易混淆）表现，我来拆解一下背后的逻辑：

先复现你的问题场景 #

先把可复现的代码整理好，方便直观验证：

<svg width="200" height="30">
  <circle cx="10" cy="10" r="5" />
  <circle cx="60" cy="10" r="5" />
  <circle cx="110" cy="10" r="5" />
  <circle cx="60" cy="10" r="5" fill="orange">
    <animate id="go-right" attributeName="cx" to="110" dur="2s" begin="indefinite" fill="freeze" additive="replace" accumulate="none" />
    <animate id="go-left" attributeName="cx" to="10" dur="2s" begin="indefinite" fill="freeze" additive="replace" accumulate="none" />
  </circle>
</svg>
<script>
  const goLeft = document.getElementById('go-left');
  const goRight = document.getElementById('go-right');
</script>
<button onclick="goLeft.beginElement()">Go left</button>
<button onclick="goRight.beginElement()">Go right</button>

核心原因：未显式设置from时，新动画会继承当前实时计算值 #

你遇到的跳变和速度异常，本质是因为两个动画都没设置from属性。根据SVG动画规范，当from未指定时，动画会自动取启动瞬间目标属性的当前计算值作为起始值——这个值不是元素的原始属性值（比如cx="60"），而是当前正在运行的动画的实时输出值。

举个具体的流程例子：

1. 点击Go right，动画开始将cx从60向110过渡，运行1秒时，实时cx值为85（走了一半进度）
2. 此时点击Go left，新动画启动：它的from会自动取当前的85，to是10，时长还是2秒
3. 所以新动画会从85向10过渡，前半段看起来“速度更快”（因为2秒内要走75的距离，而原本从60到10只需要走50），直到完成后冻结在10。

为什么和你理解的“非叠加覆盖”规范不冲突？ #

你引用的12.4.3和12.4.5规范是正确的，但你可能忽略了一个关键细节：非叠加动画覆盖的是动画的输出结果，但新动画的起始值是在它成为高优先级层之前，基于当前属性的实时计算值来确定的。

当启动新动画时：

1. 新动画会立即成为三明治模型的更高优先级层，覆盖之前的动画输出
2. 但新动画的from值是在它成为高优先级层之前，当前属性的计算值（也就是旧动画的实时输出）
3. 所以新动画是从这个中间值开始，而非元素的原始属性值，这就造成了“跳变”的视觉效果。

关于endElement()导致更奇怪值的问题 #

当你调用endElement()终止正在运行的动画时：

• 如果动画设置了fill="freeze"，只有当动画正常完成（到达dur的结束点）时，才会冻结在to值
• 中途调用endElement()会让动画立即结束，此时fill="freeze"不生效，属性值会回退到三明治模型下一层的输出值——如果之前有冻结的动画，就回到那个值；如果没有，就回到元素的原始属性值。这种回退逻辑的不确定性，就导致了更复杂的跳变表现。

解决方法：显式指定from值 #

如果你想让每次动画都从固定的起始值（比如元素的原始cx=60）开始，只需要给动画显式设置from属性即可：

<animate id="go-right" attributeName="cx" from="60" to="110" dur="2s" begin="indefinite" fill="freeze" additive="replace" accumulate="none" />
<animate id="go-left" attributeName="cx" from="60" to="10" dur="2s" begin="indefinite" fill="freeze" additive="replace" accumulate="none" />

这样不管什么时候启动新动画，都会从60开始，就不会出现跳变和速度异常的问题了。

内容来源于stack exchange