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秒后移动100px（忽略第一个转换？）。我厌倦了使用动画，但这也没有按预期工作。关于我哪里出错以及我应该做些什么以获得动画效果的任何建议？

Answer 1

1. 时间属性为begin，而不是start。

2. 不要使用px单位。虽然根据SVG 2它们是合法的，但它们不在SVG 1.1中，并且可能尚未在某些浏览器中实现。

3. additive="sum"表示转换是在以前动画产生的转换值的顶部上添加的。在动画开始时，对象将跳过from值的数量并从那里移动。这可能不是你想要达到的目标。使用additive="replace"或使用from="0"启动所有动画并将to设置为相对值。