Pregunta SVG activa la animación con evento


¿Cómo puedo activar un elemento svg animado para comenzar a animar a través de javascript con un evento arbitrario? Me estoy imaginando algo así como begin="mySpecialEvent", luego puedo enviar mySpecialEvent y la animación comenzará (o comenzará de nuevo si ya se ha reproducido).


32
2017-12-10 10:11


origen


Respuestas:


Aquí hay un artículo que cubre lo que necesita:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/

Editar: el enlace es eliminado Copias archivadas

En breve:

  1. Crea el <animation> con begin="indefinite" para que no trate la animación como comenzando en la carga del documento. Puede hacerlo a través de JavaScript o fuente SVG sin formato.

  2. Llamada beginElement() sobre el SVGAnimationElement instancia (el <animate> elemento) cuando esté listo para comenzar la animación. Para su caso de uso, use un estándar addEventListener() devolución de llamada para invocar este método cuando esté listo, p.

    myAnimationElement.addEventListener('mySpecialEvent',function(){
      myAnimationElement.beginElement();
    },false);
    

46
2017-12-10 18:24