SVG的附加值=持续时间之间的“和”有什么不同

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）。

当你有2个动画同时运行时，cx将构建为每个动画上cx值的组合。

在第二个例子上。由于其中一个动画只有1秒长，它会在较慢的动画之上快速波动。

如果您暂时忘记了添加剂，只需将第二个cx值替换为两者上的cy，您就会明白为什么动画也会有根本的不同。