SVG Animado e Interactivo: Consejos Esenciales
El formato SVG se ha convertido en una alternativa contemporánea a Flash en muchos aspectos. No solo está basado en vectores, sino que también hace posibles las animaciones y las interacciones. Debido a las diferentes formas de crear animaciones e integrar SVG en un proyecto web, debes tener en cuenta los siguientes consejos para asegurarte de que todo funcione como quieres.
¿Animaciones a través de JavaScript, CSS o SMIL?
Hay tres opciones cuando se trata de poner en movimiento los SVG. Ciertamente, el más fácil es usando SMIL: “Lenguaje de Integración Multimedia Sincronizada”. Aquí, elementos únicos como “
<rect x="0" y="0" width="50" height="20"> <animate attributeName="x" from="0" to="100" dur="5s"/> </rect>
Usando CSS, puedes animar elementos de una manera similar a como lo haces en combinación con HTML. Los atributos «transición», «animación» y «@fotogramas clave» están disponibles. Sin embargo, aquí solo puede cambiar valores a través de una animación que se puede definir a través de CSS, es decir, posición y color, por ejemplo. Las formas de un polígono o una ruta no se pueden modificar mediante una animación CSS.
rect { animation: animation 5s infinite; } @keyframes animation { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }
Tanto el ejemplo de SMIL como el de CSS dan como resultado la misma animación.
Como las opciones de animación a través de CSS son limitadas, existen muchos marcos de JavaScript que se utilizan para realizar animaciones SVG complejas. JavaScript le otorga acceso a todos los elementos y atributos de un elemento SVG.
var i = 0; function animation() { document.getElementsByTagName("rect")[0].setAttribute("width", i++); window.requestAnimationFrame(animation); }
En el ejemplo, el ancho de un rectángulo se mejora mediante una animación. Por supuesto, también serían posibles animaciones significativamente más complejas.
La forma en que debe implementar SVG en su proyecto web depende de si elige JavaScript, CSS o incluso SMIL. En general, tiene la opción de usar gráficos o archivos SVG como imágenes normales mediante el elemento ««, o mediante la función «url()», como una «imagen de fondo», por ejemplo.
Sin embargo, los navegadores manejan de manera muy diferente las tres opciones de animación, dependiendo del método de implementación.
Cuando se utiliza un SVG animado como un archivo de imagen normal, las animaciones CSS y SMIL solo se ejecutan en Chrome. Firefox solo admite animaciones SMIL, e Internet Explorer y Edge no admiten animaciones en ese caso.
Implementación de SVG a través de un elemento «» o en línea
La integración mediante un elemento “
Sin embargo, Internet Explorer y Edge generalmente no admiten animaciones CSS y SMIL. Por lo tanto, solo te quedará la opción de JavaScript.
Interacciones usando JavaScript
Aparte de las animaciones, JavaScript también puede crear un gráfico SVG interactivo. De esta manera, puede integrar detectores de eventos que reaccionan a los clics del mouse, por ejemplo. Para que JavaScript funcione dentro de un SVG, debe implementarse en el documento HTML con un elemento «
document.getElementsByTagName("circle")[0].addEventListener("click", function() { alert("Hello"); }, false);
En el ejemplo, un clic en un círculo activa una “alerta()”.
Al vincular un archivo SVG como fondo a través del elemento ««, o al usar CSS y «url()», el JavaScript que contiene no se ejecuta.
Incluso al integrar un archivo SVG con un elemento «
document.getElementsByTagName("object")[0].contentDocument.getElementsByTagName("circle")[0].addEventListener("click", function() { alert("Hello"); }, false);
A diferencia de CSS y SMIL, JavaScript dentro de SVG se trata de la misma manera en todos los navegadores.
(dpe)
#SVG #Animado #Interactivo #Consejos #Esenciales