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" />

但是现在对象只在20之后移动100 is (第一个转换被忽略了？)。我厌倦了使用动画，但这也不像预期的那样有效。关于我哪里出了问题，我应该怎么做才能获得动画效果，有什么建议吗？

Answer 1

1. 时间属性是begin，而不是start。
2. 把px单位关掉。虽然根据SVG 2，它们是合法的，但它们不在SVG1.1中，而且可能还没有在某些浏览器中实现。
3. additive="sum"意味着转换是在以前动画产生的转换值之上添加的。在动画开始时，对象将跳转到from值的数量，然后从那里移动。这可能不是你想要达到的目标。要么使用additive="replace"，要么使用from="0"启动所有动画，并将to设置为相对值。