svg - 使用 SMIL 链接两个

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 .

因此，如果您想从第一个动画的终点开始第二个动画，请将该属性添加到第二个动画。动画链接的方式，然后第一个动画将再次开始。如果您希望它从第二个动画的最终位置重新开始，请将该属性也添加到第一个动画。