如何循环SVG动画序列？

Question

我有 animationTransform 序列：

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>

是否可以在不使用脚本的情况下循环此序列？

我可以通过使用 repeatCount="indefinite" 将单个动画设置为循环，因为我想按顺序循环整个序列。

Answer 1

已经想通了。有兴趣的人的解决方案：

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/>
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>

Answer 2

您还可以通过提供带有分号分隔列表的 values 属性来在单个 animateTransform 中循环：

<animateTransform attributeName="transform" type="rotate"
     values="0;30;0" begin="0s" dur="0.8s" fill="freeze"
     repeatCount="indefinite" />

这是一个示例（在 Firefox 4.0 和 Chrome 中检查）。

Answer 3

也可以加/减（毫秒）秒：

  begin="anim2.end-500ms"