每隔x秒动画SVG元素

Question

介绍

我知道一些SVG使用Javascript和DOM <animate>元素的基本动画技术.所以我创建了这个SVG,但我无法弄清楚如何在没有太多代码的情况下每x秒触发一次动画.我试过begin="4s"但它只是第一次等.

题:

有一个类似begin或的DOM属性dur,但是以秒为单位定义间隔？哪种方法更好？

我尝试过的:

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/>

这里有完整的例子:SVG Fiddle

笔记:

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

Answer 1

<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>

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

试试这个，祝一切顺利

更新

如果您能够使用 id.end 而不是 id.end+some_clock_value 那么正确使用 keyTimes 和 value 属性，用以下 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" />