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设置为相对值。