Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/414.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 有没有办法延迟SVG animateTransform中的重新启动_Javascript_Css_Html_Image_Svg - Fatal编程技术网

Javascript 有没有办法延迟SVG animateTransform中的重新启动

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"

我正在尝试沿SVG图像的轴旋转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
 />

尝试以下代码

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

这并不能完全修复它。它确实造成了一点延迟,但是旋转完全不正常。也许如果我玩一下数字。。。