Javascript 有没有办法延迟SVG animateTransform中的重新启动
我正在尝试沿SVG图像的轴旋转SVG图像,我可以使用以下代码成功完成此操作:Javascript 有没有办法延迟SVG animateTransform中的重新启动,javascript,css,html,image,svg,Javascript,Css,Html,Image,Svg,我正在尝试沿SVG图像的轴旋转SVG图像,我可以使用以下代码成功完成此操作: <animateTransform attributeName="transform" type="rotate" from="120 262.5 125" to="0 262.5 125" begin="2s" dur="2s"
<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
/>
尝试以下代码
<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秒)并再次开始播放…这并不能完全修复它。它确实造成了一点延迟,但是旋转完全不正常。也许如果我玩一下数字。。。