Javascript 每x秒设置SVG元素的动画

导言

我知道使用

Javascript

和DOM

SVG的一些基本动画技术

注意事项：


我已经查过了
添加一些Javascript代码是一个选项
使用CSS3也是一种选择


此处动画开始是相对于动画结束指定的，这样，动画将始终等待指定的时间（此处为4秒）并再次开始播放

试试这个，祝你一切顺利

更新

如果能够使用id.end而不是id.end+某些时钟值，则正确使用“关键时刻”和“值”属性，将旋转动画替换为以下animateTransform，并查看是否获得所需的输出

<animateTransform id="id1" attributeName="transform" additive="sum" 
     type="rotate" calcMode="linear" begin="0" dur="4" 
     repeatCount="indefinite"   keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />


我以前尝试过这个，但似乎我只能在Javascrip中使用
id.end
。我放了一把小提琴，所以试着让它在那里工作：是的，现在正在工作，我没有注意到没有旋转技巧的间隔：D
<g> 
    <rect x="0" y="0" width="30" height="20" fill="#f83"/>      
    <animateTransform id="id1" attributeName="transform" additive="sum" 
     type="scale" calcMode="linear" begin="4;id1.end+4" dur="2" keyTimes="0;1" 
     values="1 1;2 2" fill="freeze" />

</g>

<animateTransform id="id1" attributeName="transform" additive="sum" 
     type="rotate" calcMode="linear" begin="0" dur="4" 
     repeatCount="indefinite"   keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />