Animar SVG es un poco único en el sentido de que hay tres formas distintas de abordar la animación.
1. Animando con CSS @keyframes
Los elementos SVG se pueden segmentar y diseñar con CSS. Es decir, puede aplicar animación a través de @keyframes. Como esto:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Puede elegir animar de esta manera si ...
- La animación es bastante simple.
- Solo necesita animar las propiedades que CSS puede animar.
- Ya conoce y se siente cómodo con las animaciones CSS.
2. Animando con SMIL
Hay una sintaxis para las animaciones incorporada directamente en SVG. Aquí tienes un ejemplo muy simple:
Aquí hay un gran tutorial sobre todo lo que es SMIL.
Puede elegir animar de esta manera si ...
- Necesita animar propiedades que CSS no puede, como la propia forma.
- Necesita otras funciones específicas de SMIL, como comenzar una animación cuando otra termina sin sincronizar manualmente las duraciones / retrasos. O cosas de interacción, como comenzar una animación con un clic.
3. Animación con JavaScript
Con JavaScript, tiene acceso a cosas como requestAnimationFrame (u otros bucles), por lo que puede animar simplemente cambiando rápidamente los valores de propiedad. También existen marcos para trabajar con SVG que normalmente tienen elementos de animación integrados. O marcos de animación que funcionan con SVG. Como SnapSVG, GreenSock, SVG.js o Velocity.js.
Aquí hay un ejemplo con SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Puede elegir animar de esta manera si ...
- De todos modos, está trabajando en JavaScript, tal vez su animación tenga que ver con los datos que recibe con JSON o similares.
- Necesita JavaScript de todos modos, porque necesita la lógica o las matemáticas o algo más que realmente solo es posible allí.
- Está interesado en que JavaScript resuelva algunos errores por usted.
- El alcance de su animación es bastante grande / complicado y necesita la abstracción y la organización que JavaScript puede proporcionar.
Manifestación
Vea el lápiz Tres formas de animar SVG por Chris Coyier (@chriscoyier) en CodePen.
¿No afecta la forma en que finalmente usa el SVG sus opciones?
Lo hace. Si está usando SVG-as- , no podrá usar animaciones CSS de otra hoja de estilo. Pero, sus animaciones SMIL funcionarán, en algunos navegadores (en el momento de escribir este artículo, Chrome sí, Firefox no). No me sorprendería si CSS incrustado en archivos SVG funciona o funcionará algún día. JavaScript, probablemente no.
Si está utilizando SVG en una imagen de fondo CSS, imagino que es una historia similar a la anterior.
Si usa en línea , todas las posibilidades están abiertas para usted.
Si está usando SVG a través de un objecto iframe, necesitaría incrustar los scripts / estilos directamente en el SVG para que funcione.