Uso de JavaScript

Nuevo en la versión 0.47.

En los dibujos SVG se puede utilizar código JavaScript (ECMAScript) para hacer manipulaciones complejas de los objetos del dibujo. En el ejemplo de esta sección, la hoja de estilo del ejemplo anterior es sustituida por simples llamadas a funciones JavaScript. El cuadro de diálogo Propiedades del objeto se puede usar para añadir estas llamadas.

Para modificar el ejemplo anterior añadiendo en el archivo llamadas a funciones JavaScript, primero tenemos que eliminar la sección style (para ello se puede utilizar el cuadro de diálogo Editor XML). Después hay que abrir el cuadro de diálogo Propiedades del objeto y seleccionar el cuadrado (debemos asegurarnos de que seleccionamos el cuadrado y no la envoltura (wrapper) <a> ). A continuación hacer clic sobre el botón Interactividad situado en la parte inferior del cuadro de diálogo. Después tenemos que introducir el texto setAttribute('fill-opacity','1.0') en el recuadro de entrada onmouseover, y el texto setAttribute('fill-opacity','0.75') en el recuadro de entrada onmouseout. ¡Eso es todo! Atención: no se debe guardar el archivo en el formato SVG plano, ya que entonces se eliminarán los comandos JavaScript.

Cuadro de diálogo Propiedades del objeto.
El cuadro de diálogo Propiedades del objeto en el que aparecen los comandos JavaScript añadidos (así como los textos introducidos en los atributos Título y Descripción).

En el cuadro de diálogo Propiedades del objeto podemos rellenar los atributos Título y Descripción. Es posible especificar estos atributos para cualquier objeto de un documento SVG, incluidos los Grupos. La finalidad del atributo Título es que sea utilizado en una nota emergente. Esta posibilidad está implementada solo en algunos navegadores con capacidad SVG como Opera. (Firefox 3.5 mostrará en la barra del título de la ventana el primer Título encontrado en el documento). Como su nombre indica, el atributo Descripción sirve para guardar una descripción del objeto. Normalmente el objetivo de este atributo no es la presentación de su contenido junto al dibujo. Atención: es necesario hacer clic sobre el botón Aplicar para que los cambios realizados en estos atributos tengan efectos.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 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"
   id="svg1341">
  <defs
     id="defs1343" />
  <g
     id="layer1">
    <a
       xlink:href="http://www.w3.org/"
       style="fill-opacity:0.75"     1
       id="a1445">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;stroke:#000000;stroke-width:1px"     2
         id="rect1353"
         onmouseover="setAttribute('fill-opacity','1.0')"     3
         onmouseout="setAttribute('fill-opacity','0.75')" />
        <desc
           id="desc3364">A clickable square to test simple JavaScript.</desc>
        <title
           id="title3362">Click square to goto http://www.w3.org</title>
    </a>
  </g>
</svg>
  

1

Opacidad predefinida del rectángulo.

2

Estilo del rectángulo. Observe que el atributo fill-opacity no está definido en esta línea. Esto permite que los atributos de clase puedan ser anulados.

2

Llamadas a las funciones JavaScript correspondientes a los eventos onmouseover y onmouseout.