javascript - 有没有办法延迟 SVG animateTransform 中的重启

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 秒)并再次开始播放 ...