Ir directamente al contenido de esta página

codexexempla.org

Un ejemplo de interacción entre SVG y JavaScript

Tabla de contenidos

  1. Introducción
  2. El ejemplo
  3. Limitaciones

Introducción

Uno de los motivos por los que la programación de JavaScript basado en DOM es más potente que su programación tradicional, es que no sólo es aplicable a un documento XHTML, sino a cualquier lenguaje basado en XML, por ejemplo, SVG, las siglas para designar gráficos vectoriales escalables que se crean por medio de un marcado que el W3C recoge en ésta, su última especificación.

El ejemplo

Como ejemplo, incluyo aquí uno de esos ejercicios típicos de los cursos de Flash —casi tan inevitable como el «¡Hola mundo!» de cualquier lenguaje de programación—: hacer que un círculo se contraiga o se expanda a petición del usuario.

Al mantener pulsado el ratón sobre el rectángulo siguiente, un script aumenta progresivamente el radio del círculo generado por medio de SVG, y tiende a hacerlo transparente. Al soltar el botón del ratón el radio se reduce, y recupera su opacidad.

Si en esta zona no ve un círculo, es que su navegador no soporta SVG.

El SVG interactivo

En script en sí mismo no es importante —lo único que hace es modificar los atributos r y opacity de un elemento circle—. Lo que sí es importante es la vinculación del script en el documento SVG. Como en este lenguaje de marcado no existe el atributo src para script, la inclusión se hace por medio de esta línea:


    <script type="text/javascript" xlink:href="script.js"></script> 
        

Por lo tanto, hay que especificar también el espacio de nombres de XLink junto al de SVG:


    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"> 
        

Limitaciones

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon