come avviare un'animazione alla fine di un'altra animazione?

Question

Sto provando ad avere un punto sfumato dal bianco al rosso e poi dal bianco al rosso.

Questo è quello che ho finora:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/> 
<animate id="testies" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" /> 
<animate attributeName="fill" from="" to="#ED1C24" 
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" /> 

Voglio la seconda animazione per iniziare quando il primo finisce, so che questo è possibile, non riesco proprio a capirlo.

Answer 1

Usando il tuo esempio, ecco come:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/> 
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff" 
    xlink:href="#test" dur="2s" fill="freeze" /> 
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test" 
    begin="testies.end" dur="2s" fill="freeze" /> 

o in alternativa equivalente, senza la sintassi xlink:href:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"> 
    <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff" 
    dur="2s" fill="freeze" /> 
    <animate attributeName="fill" from="" to="#ED1C24" 
    begin="testies.end" dur="2s" fill="freeze" /> 
</circle> 

Quindi, in sostanza basta aggiungere l'id dell'elemento che si desidera attivare la altre animazioni da e aggiungere un suffisso ".end". Puoi anche specificare ".begin" per attivare l'inizio di un'animazione o aggiungere un offset di tempo, ad esempio begin="someId.end+2s".

È anche possibile utilizzare gli eventi per attivare le animazioni, la sintassi è simile: id seguita da un punto e quindi il nome dell'evento e facoltativamente un offset di tempo. Vedere l'elenco degli eventi richiesti in SVG 1.1 here (la colonna più a sinistra denominata "Nome evento" è ciò che si applica qui).

Se non hai paura delle specifiche, consulta lo full syntax of the begin attribute per tutti i dettagli.