En este capítulo, exploraremos cómo agregar interactividad a los gráficos SVG utilizando JavaScript. Con JavaScript, podemos manipular y animar elementos SVG de forma dinámica, respondiendo a eventos del usuario como clics, movimientos del ratón y cambios en el estado de la página. La interactividad es una herramienta poderosa para hacer que los gráficos SVG sean más atractivos y reactivos.

Manipulación Básica de SVG con JavaScript

Para manipular SVG con JavaScript, primero necesitamos seleccionar el elemento SVG o sus elementos hijos en el DOM. Una vez seleccionados, podemos modificar sus atributos, aplicar estilos o incluso agregar nuevas animaciones.

Ejemplo de Selección y Cambio de Atributos en SVG

En este ejemplo, usaremos JavaScript para cambiar el color de un círculo cuando el usuario haga clic sobre él:

html

Aquí, utilizamos getElementById para seleccionar el círculo y luego añadimos un eventListener para que, al hacer clic, el color de relleno (fill) cambie a rojo.

Detectar Eventos del Ratón en SVG

Podemos utilizar eventos del ratón como mouseover, mouseout y mousemove para detectar cuando el usuario interactúa con un elemento. Esto permite crear efectos como cambios de color al pasar el ratón o mostrar información adicional.

Ejemplo de mouseover y mouseout

El siguiente ejemplo cambia el color de un rectángulo cuando el ratón se encuentra sobre él y lo restablece cuando el ratón sale.

html

Este ejemplo hace que el rectángulo cambie de color cuando el ratón está encima y recupere su color original al salir.

Control de Animaciones con JavaScript

JavaScript permite iniciar, detener o modificar animaciones en SVG de forma dinámica. Esto es útil para crear interacciones avanzadas, como reproducir una animación solo cuando el usuario hace clic en un botón o al desplazarse por la página.

Ejemplo de Iniciar y Detener una Animación

El siguiente ejemplo mueve un círculo de un lado a otro solo cuando el usuario hace clic en un botón.

html

Aquí, setInterval se usa para mover el círculo a la derecha en intervalos de 50 ms, creando un efecto de movimiento. La animación se detiene con clearInterval.

Crear Elementos SVG Dinámicamente

JavaScript también permite crear y agregar nuevos elementos SVG al DOM en tiempo real. Esto es útil para generar gráficos dinámicos basados en entradas del usuario o datos externos.

Ejemplo de Creación de Nuevos Elementos

Este ejemplo permite al usuario agregar círculos al hacer clic en el área SVG.

html

En este ejemplo, al hacer clic en el área SVG, se crea un nuevo círculo en la posición del clic. La función createElementNS permite crear elementos SVG específicos, y appendChild los agrega al SVG existente.

Conclusión

JavaScript nos permite transformar los gráficos SVG en elementos interactivos, lo cual enriquece la experiencia del usuario y permite desarrollar gráficos personalizados que responden a acciones. Al combinar SVG y JavaScript, podemos crear aplicaciones visuales complejas, como gráficos de datos interactivos, mapas y juegos. En el próximo y último capítulo, construiremos un proyecto final que combine todos los conceptos aprendidos, creando una animación completa e interactiva en SVG.

¡Nos vemos en el próximo capítulo!