Question

我正在尝试沿其轴旋转我的SVG图像，我可以使用以下代码成功完成：

<animateTransform attributeName="transform"
                  type="rotate"
                  from="120 262.5 125"
                  to="0 262.5 125"
                  begin="2s"
                  dur="2s"
                  repeatCount="indefinite"
 />

我的问题是，是否有办法将动画重启动作一两秒。将repeatCount设置为无限期，它会立即重新启动它。

提前致谢！

更新

我已经尝试过下面给出的代码，但它并没有像我需要的那样工作。它需要围绕svg的中心轴旋转，但在重新启动之前暂停约一秒钟。有什么想法吗？

最终更新

如果有人在将来看到这个问题，我将提供我能够做到的工作。通过添加id，更改开始时间和repeatCount，我成功地能够在两者之间延迟重复旋转。

以下是代码：

<animateTransform id="rotation" attributeName="transform"
                  type="rotate"
                  from="120 262.5 125"
                  to="0 262.5 125"
                  begin="2+rotation.end+2"
                  dur="2s"
                  repeatCount=1
 />

Answer 1

尝试以下代码

<animateTransform attributeName="transform"
    type="rotate"
    from="120 262.5 125"
    to="0 262.5 125"
    begin="0"
    dur="2s"
    repeatCount="indefinite"
    keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3"
 />

这里动画开头是相对于动画结尾指定的，这样你的动画总会等待你指定的时间（这里是4秒）并再次开始播放......

有没有办法延迟SVG animateTransform的重启

1 个答案: