SVG的additive=“和”在持续时间上有什么区别？

Question

以下代码的差异？

为什么结果是不同的？

我以为是一样的。

然而，不同的结果时，实际的细胞动画。

​

<svg width="1000" height="1000">
  <circle cx="10" cy="10" r="10">
    <animate
       attributeType="XML" attributeName="cx"
       dur="10s" values="100; 200; 100"
       repeatCount="indefinite" />
    <animate
       attributeType="XML" attributeName="cx"
       dur="10s" values="0; 300; 0"
       repeatCount="indefinite" additive="sum" />
  </circle>
</svg>

​

​

<svg width="1000" height="1000">
      <circle cx="10" cy="10" r="10">
        <animate
           attributeType="XML" attributeName="cx"
           dur="19s" values="100; 200; 100"
           repeatCount="indefinite" />
        <animate
           attributeType="XML" attributeName="cx"
           dur="1s" values="0; 300; 0"
           repeatCount="indefinite" additive="sum" />
      </circle>
    </svg>

​

Answer 1

这不是加法的时间，如果你这么认为的话，那就是属性(cx)的值。

因为你有两个动画运行在同一时间，cx将作为一个组合的任何值的cx是在每个动画。

关于第二个例子。因为其中一个动画只有1秒长，它将波动非常快，在一个较慢的动画之上。

如果你暂时忘记了加法，只需将第二个cx值替换为cy，你就会明白为什么动画也是完全不同的。