AnimateTransform 没有按预期工作

AnimateTransform not working as expected

我的意图是将对象移动到一个设定点 (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(第一个变换被忽略了?)。我厌倦了使用 animate,但这也没有按预期工作。关于我哪里出错以及我应该怎么做才能获得想要的动画效果有什么建议吗?

  1. 计时属性是begin,不是start

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

  3. additive="sum" 表示将变换添加到到先前动画产生的变换值 之上。在动画开始时,对象将跳跃 from 值的量并从那里移动。这可能不是您想要实现的。使用 additive="replace" 或使用 from="0" 启动所有动画并将 to 设置为相对值。