Los atributos begin y end

facebook-svg gplus-svg twitter-svg

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>
  haz clic      			  
haz clic

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"