SVG in HTML5
Animaciones en SVG (SMIL y CSS)
En este capítulo, exploraremos cómo animar elementos en SVG. Las animaciones en SVG permiten crear efectos visuales dinámicos que hacen que los gráficos sean más interactivos y atractivos. Veremos dos métodos principales para animar SVG: SMIL (Synchronized Multimedia Integration Language) y CSS.
Introducción a las Animaciones en SVG
SVG soporta animaciones a través de SMIL, una especificación que permite agregar efectos de movimiento y transición directamente en el archivo SVG. Además, es posible aplicar animaciones CSS para animar elementos específicos de SVG, lo que hace que el proceso sea más flexible y compatible con las hojas de estilo.
Animación con SMIL en SVG
SMIL permite animar atributos SVG utilizando elementos como <animate>
, <animateTransform>
, y <animateMotion>
. Estos elementos pueden integrarse en el SVG para animar propiedades específicas de los elementos.
Ejemplo Básico de Animación con <animate>
El siguiente ejemplo utiliza el elemento <animate>
para cambiar el color de relleno de un círculo de azul a rojo de forma cíclica:
html
Aquí, el atributo attributeName="fill"
indica que queremos animar el color de relleno del círculo. from="blue"
y to="red"
definen los colores inicial y final, dur="2s"
establece la duración de la animación, y repeatCount="indefinite"
hace que la animación se repita indefinidamente.
Uso de <animateTransform>
para Transformaciones Animadas
El elemento <animateTransform>
se utiliza para animar transformaciones, como translate
, scale
, rotate
y skew
.
html
En este ejemplo, type="rotate"
especifica que se trata de una rotación. La animación comienza en 0
grados y rota hasta 360
grados en torno al punto (35, 35)
, repitiéndose indefinidamente.
Movimiento con <animateMotion>
El elemento <animateMotion>
permite mover elementos a lo largo de una ruta especificada.
html
En este caso, el círculo sigue la trayectoria definida en el <path id="path1">
. La animación se repite indefinidamente a lo largo del camino.
Animación de SVG con CSS
Otra forma de animar SVG es utilizando CSS. Esto permite aplicar transiciones y animaciones CSS a los elementos SVG, aunque algunas propiedades son limitadas en comparación con SMIL.
Ejemplo de Animación CSS con @keyframes
En este ejemplo, usaremos @keyframes
para hacer que un círculo cambie de tamaño repetidamente:
html
La clase .circle
en CSS aplica la animación pulse
, la cual modifica el radio del círculo para que aumente y disminuya en un bucle continuo.
Ventajas y Limitaciones de SMIL vs. CSS
- SMIL: Ofrece una mayor gama de opciones de animación y es más flexible para animaciones complejas, como movimiento a lo largo de rutas o transformaciones detalladas.
- CSS: Es más fácil de integrar con estilos existentes y ofrece animaciones simples, aunque tiene limitaciones en términos de propiedades animables en SVG.
Conclusión
Las animaciones en SVG ofrecen múltiples opciones para hacer gráficos más atractivos e interactivos. Con SMIL y CSS, podemos mover, transformar y cambiar atributos visuales de los elementos SVG, creando una variedad de efectos animados. En el próximo capítulo, aprenderemos a agregar interactividad a SVG con JavaScript, lo que nos permitirá controlar las animaciones en respuesta a las acciones del usuario.
¡Nos vemos en el próximo capítulo!