cómo comenzar una animación al final de otra animación?

Question

Estoy tratando de tener un desvanecimiento de punto de blanco a rojo y luego de blanco a rojo.

Esto es lo que tengo hasta ahora:

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

quiero la segunda animación que comienza cuando termina el primero, sé que esto es posible, simplemente no puedo entenderlo.

Answer 1

Usando su ejemplo, aquí es cómo:

<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 como una alternativa equivalente sin la sintaxis 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> 

Así que, básicamente, sólo añadir el id del elemento que desee activar la otra animación desde y agregue un sufijo ".end". También puede especificar ".begin" para activar al principio de una animación, o agregar un desplazamiento de tiempo, por ejemplo, begin="someId.end+2s".

También es posible utilizar eventos para activar animaciones, la sintaxis es similar: id seguido de un punto y luego el nombre del evento y, opcionalmente, un desplazamiento de tiempo. Consulte la lista de eventos que se requieren en SVG 1.1 here (la columna situada más a la izquierda con la etiqueta "Nombre del evento" es lo que se aplica aquí).

Si no le asustan las especificaciones, consulte el full syntax of the begin attribute para obtener todos los detalles.