Animate SVG Element alle x Sekunden

Question

Einführung

Ich weiß, dass einige grundlegende Animationstechniken für SVG unter Verwendung von sowohl Javascript und DOM <animate> Element. Also habe ich dieses SVG erstellt, aber ich kann nicht herausfinden, wie die Animation alle x Sekunden ohne zu viel Code ausgelöst wird. Ich habe versucht begin="4s", aber es warte nur das erste Mal.

Frage:

Es ist eine DOM-Eigenschaft wie begin oder dur, aber ein Intervall in Sekunden zu definieren? Was ist der bessere Weg, dies zu erreichen?

Was ich versucht:

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

Komplettes Beispiel hier: SVG Fiddle

Hinweise:

• Ich habe bereits SVG Spec
• Fügen Sie einige Javascript-Code ein ist Option
• CSS3 Verwendung ist eine Option zu

Answer 1

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

hier Animation beginnt mit relativ zur Animation Ende angegeben ist, auf diese Weise Ihre Animation wird immer für Ihre angegebene Zeit warten (hier 4 sec) und spielt wieder ...

versuchen, dies alles Gute

UPDATE

, wenn Sie in der Lage statt id.end + some_clock_value verwenden id.end dann keyTimes verwenden und Werte korrekt Attribut, mit folgenden AnimateTransform Ihre Rotation Animation ersetzen und sehen Sie, wenn Sie die Ausgabe, die Sie wollen bekommen,

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