Animacja SVG elementem co x sekund

Question

Wprowadzenie

Znam kilka podstawowych technik animacyjnych dla SVG wykorzystaniem zarówno Javascript i DOM <animate> element. Stworzyłem ten SVG, ale nie mogę zrozumieć, jak wyzwalać animację co x sekund bez zbytniego kodu. Próbowałem begin="4s", ale to tylko czekać za pierwszym razem.

Pytanie:

Istnieje właściwość DOM jak begin lub dur, ale aby określić interwał w sekundach? Który jest lepszy sposób na osiągnięcie tego?

Co Próbowałem:

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

Kompletny przykład tutaj: SVG Fiddle

Uwagi:

• już sprawdzone SVG Spec
• dodać kod Javascript jest Opcja
• Korzystanie CSS3 jest rozwiązaniem zbyt

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> 

tutaj animacja zacząć jest określona w stosunku do końca animacji, w ten sposób animacja będzie zawsze czekać na określony czas (tu 4 sek) i rozpocząć odtwarzanie ponownie ...

spróbować, wszystkiego najlepszego

UPDATE

jeśli stanie wykorzystać id.end zamiast id.end + some_clock_value następnie użyć keyTimes i wartości atrybutów prawidłowo, wymień swoją animację obrotu z następujących animateTransform i sprawdzić, czy masz wyjście chcesz,

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