Animaciones Sencillas

El estándar SVG permite realizar la animación de dibujos tanto internamente mediante elementos de animación, como externamente por medio de scripts. En esta sección se explica la forma de conseguir una animación sencilla utilizando ECMAscript (que es la especificación de un lenguaje de programación que tiene como dialectos JavaScript y JScript). Aunque hay planes de que en el futuro Inkscape permita realizar animaciones, actualmente no es posible hacerlas con este programa. Por ello, para añadir animación a un dibujo de Inkscape es necesario editar el correspondiente archivo SVG con un editor de texto. Hay que señalar que con la versión 0.47 de Inkscape es posible utilizar de forma limitada la programación con scripts mediante las extensiones Definir atributos y Transmitir atributos.

En el siguiente dibujo SVG un cuadrado azul se mueve oscilando de izquierda a derecha (en un navegador que admita archivos SVG). La opacidad del cuadrado cambia cuando el cursor se sitúa sobré él, y además contiene un enlace de hipertexto.

<?xml version="1.0"?>

<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="150"
   height="150"
   onload="Start(evt)"     1
   id="svg11341">
  <defs
     id="defs1343" />
  <style
     id="style1324"
     type="text/css" >
     rect:hover {fill-opacity:1.0;}
  </style>

  <script type="text/ecmascript"><![CDATA[     2

    var time = 0;
    var delta_time = 50;
    var max_time = 1000;
    var dir = 1;

    var the_rect;

    function Start(evt) {     3

      the_rect = evt.target.ownerDocument.getElementById("rect1353");     4
      Oscillate();
    }

    function Oscillate() {
      time = time + dir * delta_time;
      if (time >  max_time)  dir = -1;
      if (time < -max_time)  dir =  1;

      // Calculate x position
      x_pos = (time * 25) / max_time;
      the_rect.setAttribute("transform", "translate(" +x_pos+ ", 0.0 )");5

      // Repeat
      setTimeout("Oscillate()", delta_time)
    }

    window.Oscillate = Oscillate
  ]]></script>     6

  <g
     id="layer1">
    <a
       xlink:href="http://www.w3.org/"
       style="fill-opacity:0.75"
       id="a1445">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;stroke:#000000;stroke-width:1px"
         id="rect1353" />
   </a>
 </g>
</svg>
  

1

Instrucción para llamar al script cuando se carga el archivo.

2

Principio del script.

3

Instrucción para inicializar el script.

4

Instrucción para obtener la referencia al objeto rectángulo (nuestro cuadrado azul).

5

Definición del atributo transform del rectángulo.

6

Final del script.