0

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

4

1 回答 1

1

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

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

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

于 2017-10-21T15:54:52.627 回答