Animaciones en SVG

SVG tiene una serie de etiquetas para realizar animaciones, las cuales son admitidas por el visor de Adobe, pero que no están implementadas por el visor nativo de Firefox. Ahora viene el problema, si queremos que nuestra animación se vea en ambos navegadores IE (con el pluggin de Adobe) y Firefox, tendremos que realizar la animación de forma dinámica. Existen dos formas de realizar la animación, mediante Javascript en la página que contiene el SVG o mediante ECMAScript.

Javascript

ECMAScript

En IE tiene que estar instalado la versión 6 del Adobe SVG Viewer

Mostrar resto >>

<< Ocultar resto
En ambos casos el funcionamiento es el mismo, tenemos un SVG, que contiene un elemento texto, accedemos a este mediante el id y modificamos el atributo transform (la rotación se hace mediante rotate).
El SVG será el mismo (salvo el código ECMAScript que se añade en uno de los ejemplos):

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" > <g     id="grafica">     <!-- BARRA DE COORDENADAS -->     <circle cx="62" cy="62" r="55" style="stroke:#315C7C; fill: #FFF3C9"/>     <text         style="font-size:10pt;fill:#315C7C; font-family:Arial;text-anchor: middle"         x = "52"         y = "62"         id="texto">display: NONE</text> </g> </svg>

La animación mediante Javascript se hará con el siguiente código:

var svgns = "http://www.w3.org/2000/svg"; var ang = 0; var velocidad = 140; var grado = 15; // Anima el texto function animar() {     // Obtenemos el documento SVG     var svgDocument =         document.getElementById('svg').getSVGDocument();     // Obtenemos el elemento de texto         var texto =         svgDocument.getElementById("texto");     // Modificamos la rotacion     texto.setAttribute("transform",         "rotate("+ang+" 62 62)");     ang = (ang+grado)%360;     // Animamos la rotacion     setTimeout("animar()", velocidad); }

Habrá que incluir este código si se quiere realizar mediante ECMAScript. Fíjate que hay una cosa un tanto extraña, en el setTimeout se llama a window.Animar(), cuando window.Animar = animar, esto es debido a que es necesario para que el pluggin de Adobe reconzca la función animar() dentro del setTimeout.

<script type="text/ecmascript"> <![CDATA[ var ang = 0; var velocidad = 140; var grado = 15; function animar() {         var documento = null;         try {             documento = (svgDocument)? svgDocument: document;         } catch (e) {             documento = document;         }                  var texto =             documento.getElementById("texto");         texto.setAttribute("transform",             "rotate("+ang+" 62 62)");         ang = (ang+grado)%360;         setTimeout("window.Animar()", 100); }     window.Animar = animar; ]]> </script>