Làm thế nào để lặp lại chuỗi hoạt ảnh SVG?

Question

Tôi có chuỗi các 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"/> 

Nếu nó có thể để lặp chuỗi này mà không cần sử dụng kịch bản?

Tôi có thể đặt hoạt ảnh riêng lẻ thành vòng lặp bằng cách sử dụng repeatCount="indefinite" bởi tôi muốn lặp lại toàn bộ chuỗi theo thứ tự.

Answer 1

Đã tìm ra. Giải pháp cho những ai quan tâm:

<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

Bạn cũng có thể chỉ là vòng lặp trong một đơn animateTransform bằng cách cung cấp một thuộc tính values với một dấu chấm phẩy tách ra danh sách:

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

Here's an example (kiểm tra trong Firefox 4.0 và Chrome).

Answer 3

nó cũng có thể thêm/trừ (milli) giây:

begin="anim2.end-500ms"