w3.unpo<code>todo

Símbolos animados (2)

Esta es una continuación de Símbolos animados (1)

Animando múltiples imágenes SVG

Es normal que queramos utilizar el símbolo SVG ( creado anteriormente ) varias veces en la misma página, y claro está, animarlo también.

¿Como hacerlo?

Primero el script atraviesa todo el documento en búsqueda de elementos <use>.

var useElmts = document.getElementsByTagName("use");

A continuación escribiremos un bucle for que recorre el array de los elementos <use>.

for(var i=0; i<useElmts.length; i++){. . . 

Dentro del bucle hay una función anónima. Se trata de una función anónima encapsulada que tiene esta sintaxis:

(function(){
      alert(2 + 2);
})();

Las funciónes anónimas encapsuladas se auto ejecutan de inmediato. Lo que escribimos arriba es equivalente a:

// construye la función
function DosMasDos(){
      alert(2 + 2);
}
// llama la función
DosMasDos(); 
  

Lea más sobre las funciones anónimas encapsuladas en JavaScript: Explain JavaScript's encapsulated anonymous function syntax

El contenido de esta función anónima es muy parecido a lo que hemos visto anteriormente. A continuación hemos marcado con //----- el principio y el fin de la función anónima.

En el HTML tenemos 4 lienzos SVG. Primer lienzo es donde guardamos las definiciones <defs>, en este caso el #triangulo. Este lienzo tiene display:none.

Los otros tres lienzos son aquellos donde utilizamos el #triangulo con <use>. Sabemos que el elemento <symbol> soporta el atributo viewBox, y por tanto una vez dibujado un símbolo podemos generar replicas de dimensiones variables. Solo hay que cambiar el valor de la anchura width y de la altura height del elemento <use>.
Los elementos <use> que muestran el #triangulo tienen asignadas diferentes valores para la anchura width, la altura height y para las coordenadas x e y, y por tanto generan copias de tamaño diferente.

Los elementos <use> tienen asignado un id: "use" seguido de un número, por ejemplo id="use1".
También las animaciones <animateTransform> tienen asignado un id: "transformacion" seguido de un número, por ejemplo id ="transformacion1".
Esto es muy útil a la hora de manipular los elementos a través de un bucle for.

A continuación queremos crear un botón utilizando símbolos SVG animados