持續時間之間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，您就會明白為什么動畫也從根本上有所不同。