Как закодировать последовательность анимации SVG?

У меня есть последовательность 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"/>

Если возможно выполнить цикл этой последовательности без использования script?

Я могу настроить отдельную анимацию на цикл, используя repeatCount="indefinite", я хочу упорядочить последовательность в последовательности.

Ответ 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"/>

Ответ 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).

Ответ 3

также можно добавить/вычесть (милли) секунд:

  begin="anim2.end-500ms"