Как зациклить последовательность анимации 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

Вы также можете просто выполнить цикл внутри одного animateTransform, предоставив атрибуту values список, разделенный точкой с запятой:

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