Los atributos begin y end
El atributo begin establece cuando debe empezar una animación. El atributo end establece cuando debe acabar.
El valor de estos atributos tiene la misma sintaxis: una lista de valores separados por punto y coma ( ; ).
Entre los valores que pueden tomar los atributos begin y end destacamos:
offset-value o clock-value representa el tiempo trascurrido desde que la página se haya cargado.
event-value describe un evento que determina el momento cuando empieza ( o acaba ) la animación.
syncbase-value el momento cuando empieza ( o acaba ) la animación es relativo al principio o final de otra animación. En este caso el valor del atributo begin o end es el id de la animación con la cual se desea sincronizar.
offset-value o clock-value
offset-value o clock-value representa el tiempo trascurrido desde que la página se haya cargado.
En el siguiente ejemplo la animación empieza 2 segundos después de que la página se haya cargado ( begin="2s" ), pero no es necesario que sean segundos. Podemos utilizar otras unidades de tiempo si así lo queremos.
h ➛ horras
min ➛ minutos
s ➛ segundos
ms ➛ milisegundos
Hay más unidades de tiempo disponibles ( la especificación w3.org ): Clock values
La especificación w3.org: Clock values
event-value
event-value describe un evento que determina el momento cuando empieza ( o acaba ) la animación. Los eventos utilizados en SVG tienen nombres familiares conocidos desde el JavaScript:
click: se produce al hacer clic sobre un elemento.
mousedown : se produce cuando se presiona el botón izquierdo del ratón sobre el elemento.
mouseup: se produce cuando se suelta el botón izquierdo del ratón.
mouseover: se produce cuando el puntero del mouse está sobre el elemento.
mousemove: se produce cada vez que el puntero del ratón se mueve sobre el elemento.
mouseout: se produce cuando el puntero del mouse sale del elemento.
En el siguiente ejemplo la animación empieza al hacer clic en el circulo dibujado con <circle> ( begin="click" ) y acaba cuando el puntero del ratón le pasa por encima ( end="mouseover" ).
También puede haber una demora respectivo al evento:
begin="click+2s"En este caso la animación empieza 2 segundos después de haberse producido el evento click.
En el siguiente ejemplo la animación empieza al hacer clic sobre el texto cuyo id="hazClic".
<text id="hazClic" x="125" y="100". . . <circle cx="40" cy="75" r="40" fill="#6ab150" fill-opacity=".85"> <animateTransform begin="hazClic.click". . . </circle>
Lista de valores
El valor de los atributos begin y end puede ser una lista de valores separados por punto y coma ( ; ). En el siguiente ejemplo la animación empieza cuando la página se haya cargado: begin="0s". La animación tiene una duración de 4 segundos ( dur="4s" ). Queremos que la animación vuelva a empezar cada vez que pasamos con el ratón por encima. Para esto begin="0s; mouseover"
syncbase-value
En el caso de syncbase-value el momento cuando la animación empieza es relativo al principio o final de otra animación. El valor del atributo begin o end es el id de la animación con la cual se desea sincronizar.
También puede haber un adelanto o una demora respectivo al principio o final de la otra animación. En el siguiente ejemplo la segunda animación ( id="anim2" ) empieza 0.2 segundos antes que acabe la primera animación ( id="anim1" ).
begin= "0; anim1.end-.2s"