Animate SVG elemento ogni x secondi

Question

Introduzione

so che alcune tecniche di animazione di base per SVG utilizzando sia elemento Javascript e DOM <animate>. Quindi ho creato questo SVG, ma non riesco a capire come attivare l'animazione ogni x secondi senza troppo codice. Ho provato begin="4s" ma aspetta solo la prima volta.

Domanda:

C'è una proprietà DOM come begin o dur, ma per definire un intervallo in secondi? Qual è il modo migliore per raggiungere questo obiettivo?

Quello che ho cercato:

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

Completa esempio qui: SVG Fiddle

Note:

• ho già controllato SVG Spec
• Aggiungere un po 'di codice Javascript è unOpzione
• Utilizzando CSS3 è un'opzione troppo

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> 

qui animazione iniziare è specificato con relativa alla fine dell'animazione, in questo modo, l'animazione sarà sempre aspettare che il tempo specificato (qui 4 sec) e inizia a giocare ancora una volta ...

provare questo, tutto il meglio

UPDATE

se in grado di utilizzare id.end invece di id.end + some_clock_value quindi utilizzare keyTimes e valori degli attributi in modo corretto, sostituire l'animazione di rotazione con i seguenti animateTransform e vedere se si ottiene l'output desiderato,

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