每 x 秒对 SVG 元素进行动画处理

介绍

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

问题：

有一个 DOM 属性，例如begin or 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 小提琴 http://jsfiddle.net/bzrpC/

Notes:

• 我已经查过了SVG Spec http://www.w3.org/TR/SVG11/animate.html#ValueAttributes
• 添加一些 Javascript 代码是一个选项
• 使用 CSS3 也是一种选择

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

试试这个，祝一切顺利

UPDATE

如果您能够使用 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" />