使用 SMIL 链接两个 <animateTransform>

Question

我试图在我的 SVG 中有两个动画运行一个接一个。

它们是这样写的。它们被写成一个组，里面有一些基元。我正在尝试让整个组旋转然后平移。

然而当我运行这个时，转换似乎在第一个动画结束时重置

    <animateTransform attributeName="transform"
                      id="anim1" 
                      type="rotate"
                      from="0 72 72"
                      to="40 72 72"
                      begin="0s; anim2.end"
                      dur="1s"
                      fill="freeze" repeatCount="1" />
    <animateTransform attributeName="transform"
                      id="anim2"
                      type="translate"
                      from="0 0"
                      to="10 0"
                       begin="anim1.end" dur="0.4s" fill="freeze"/>

Answer 1

定义 additive="sum" 以应用一个转换 on top of the other。

所以如果你想从第一个动画的结束点开始第二个动画，给第二个动画添加属性。动画链接的方式，然后第一个动画将再次开始。如果你想让它从第二个动画的最终位置重新开始，也给第一个动画添加属性。

使用 SMIL 链接两个 <animateTransform>

Chaining two <animateTransform>s using SMIL

svg

smil