Animar SVG con CSS y SMIL

Los atributos de presentación de SVG (fill, stroke, opacity, transform) se pueden animar mediante transiciones CSS. Añada una clase y defina la transición: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Las transiciones CSS funcionan de la misma forma en los elementos SVG.

Aplique @keyframes a los elementos SVG: anime stroke-dashoffset para crear efectos de trazado de rutas, opacity para apariciones graduales y transform para movimientos y rotaciones. La misma sintaxis de animación que se utiliza con elementos HTML se aplica a los elementos SVG sin modificaciones.

La técnica de stroke-dasharray y stroke-dashoffset simula el trazado de una ruta: establezca dasharray con la longitud de la ruta y dashoffset con esa misma longitud (invisible); después, anime dashoffset hasta 0. El trazo parece dibujarse desde el principio hasta el final.

path.getTotalLength() devuelve la longitud de la ruta en unidades de usuario de SVG. Utilice este valor tanto para stroke-dasharray como para el valor inicial de stroke-dashoffset. Así se garantiza que la animación funcione correctamente independientemente de la complejidad o la longitud de la ruta.

Los navegadores modernos admiten transform de CSS en elementos SVG. En los elementos SVG, transform-origin toma de forma predeterminada la esquina superior izquierda del SVG, no el centro del elemento como en HTML. Especifique transform-box: fill-box para hacer que transform-origin sea relativo al cuadro delimitador del elemento.

SMIL (Synchronized Multimedia Integration Language) es el sistema de animación integrado de SVG. El elemento animate cambia los valores de los atributos con el paso del tiempo. SMIL no requiere JavaScript ni CSS: las animaciones son completamente declarativas dentro del marcado SVG.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> rota un elemento alrededor de un punto central especificado mediante la sintaxis de SMIL.

<animateMotion> mueve un elemento a lo largo de una ruta SVG. Haga referencia a una ruta mediante mpath o incluya sus datos directamente. El elemento sigue automáticamente la curva de la ruta, lo que resulta útil para crear trayectorias de movimiento complejas sin calcular manualmente las coordenadas.

Animaciones CSS: son compatibles con todos los navegadores modernos, se integran con la cascada de CSS y son más fáciles de controlar mediante JavaScript (pausar, invertir). SMIL: está contenido en el marcado SVG, funciona en archivos SVG estáticos sin acceso a CSS, y es declarativo y expresivo para animaciones que siguen rutas.

Anime la transición entre dos formas de ruta: las rutas deben tener el mismo número de comandos y una estructura compatible. La animación CSS anima la propiedad d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } para interpolar rutas de forma nativa con CSS.

Añada la consulta de medios prefers-reduced-motion para desactivar o simplificar las animaciones SVG para las personas a quienes el movimiento resulte incómodo. Las animaciones decorativas deben desactivarse por completo; las animaciones relevantes, como los estados de carga, deben simplificarse en lugar de detenerse.

¿Cómo crea la técnica de stroke-dasharray y stroke-dashoffset una animación de trazado de una ruta?

La animación SVG utiliza transiciones CSS y fotogramas clave para crear efectos basados en propiedades, la técnica de stroke-dasharray/dashoffset para trazar rutas, SMIL animate/animateTransform/animateMotion para crear animaciones declarativas dentro de SVG y prefers-reduced-motion para mejorar la accesibilidad. CSS y SMIL son complementarios: elija uno u otro según necesite integrar la cascada de CSS o mantener la portabilidad de un archivo independiente.