AnimateTransform不能按預期工作

Question

我的目的是將對象移動到設置點（300），在那裏停一下，然後再移動一次。我試着用animateTransform做這樣的：

<animateTransform attributeName="transform" additive="sum" type="translate" dur="12s" start="1s" fill="freeze" 
from="650px" to="300px" repeatCount="1" /> 

<animateTransform attributeName="transform" type="translate" dur="2s" additive="sum" start="20s" fill="freeze" 
from="300px" to="200px" repeatCount="1" /> 

但現在的對象只移動後20s一個100像素（第一變換被忽略？）。我厭倦了使用動畫，但這並沒有按預期工作。有關我出錯的地方以及我應該如何獲得動畫效果的建議？

Answer 1

1. 定時屬性是begin，不start。

2. 離開px單位。雖然根據SVG 2它們是合法的，但它們不在SVG 1.1中，並且可能尚未在某些瀏覽器中實現。

3. additive="sum"意味着將轉換添加的頂層由先前動畫產生的轉換值。在動畫開始時，對象將跳過from值並從那裏移動。這可能不是你想達到的。請使用additive="replace"或使用from="0"開始所有動畫，並將to設置爲相對值。