Contexto: Estoy trabajando en una infografía en SVG. Quiero que el documento cobre vida gracias a las animaciones, especialmente al encadenar animaciones . Ya estoy familiarizado con SVG, pero comencé a aprender la animación SVG recientemente.

Dado que SMIL está obsoleto, estoy intentando producir animaciones en SVG puro.

Mirando en este artículo (especialmente el Cuadro de referencia de reemplazo de Handy Dandy al final), tengo la impresión de que debo dejar de usar atributos de este tipo:

fill="freeze"
repeatCount="indefinite" 
begin="hover" 
begin="circ-anim.begin + 1s" 

… Porque son parte de SVG SMIL.

Pero, si miro la referencia SVG en Mozilla, Veo <animate> y <animateTransform> dentro de la lista, sin ninguna advertencia acerca de que son SMIL o la necesidad de dejar de usarlos.

Además, parece que Chrome normalmente advierte contra el uso de animaciones SMIL en la consola, pero no veo tal advertencia cuando uso <animate> o <animateTransform> (ya sea en un documento SVG o dentro de un documento HTML que incluye un objeto SVG.)

En pocas palabras, no tengo claro qué es SMIL y qué es SVG puro . ¿Alguien puede arrojar algo de luz sobre el tema? ¿Puedo usar <animate> y <animateTransform>?

2
Fabien Snauwaert 6 dic. 2016 a las 15:25

1 respuesta

La mejor respuesta

SMIL ya no está obsoleto en Chrome .

Valoramos todos sus comentarios, y está claro que hay casos de uso atendidos por SMIL que todavía no tienen reemplazos de alta fidelidad. Como resultado, hemos decidido suspender nuestra intención de desaprobar y dar pasos más pequeños hacia otras opciones.

Básicamente, SMIL en SVG lo es todo en el capítulo de animación de la especificación.

Ese es el elemento <animate>, el elemento <set>, el elemento <animateMotion> y el elemento <animateTransform>. (la especificación SVG también contiene un elemento <animateColor> que no debe usarse, puede reemplazarlo con animate).

7
Paul LeBeau 6 dic. 2016 a las 18:21