使用 SMIL 链接两个 <animateTransform>

cjd*_*jds 2 svg smil

我正在尝试让 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"/>
Run Code Online (Sandbox Code Playgroud)

ccp*_*rog 5

定义additive="sum"将一种转换应用到另一种转换之上

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