What is the difference of SVG's additive=“sum” between duration

Question

The difference of the following code?

Why the result is different from?

I thought it was the same.

However, different results when the cell actually animation.

 <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

Its not the time thats additive, if thats what you think, its the value of the attribute (cx).

As you have 2 animations running at the same time, cx will build up as a combination of whatever the values of cx are on each animation.

On the 2nd example. As one of the animations is only 1 second long, it will fluctuate very fast, on top of a slower animation.

If you forget about the additive for the moment, and just replace the 2nd cx value with cy on both, you will see why the animations are fundamentally different as well.