SVG: Cómo crear gráficos interactivos para su sitio web

Seguramente sabe que SVG es mucho más que un formato de archivo basado en vectores. Las animaciones y las interacciones también forman parte del arsenal del formato vectorial. Como JavaScript también se puede usar dentro de un archivo SVG, hay muchas opciones de uso. La solución JavaScript svidget.js proporciona un marco extenso que le permite crear e integrar gráficos SVG como widgets.

Creación e integración de widgets SVG

Los widgets SVG son archivos SVG clásicos al principio. Se pueden ampliar con elementos adicionales que le permiten alterar la apariencia de un gráfico gracias al marco svidget.js. Además, el marco le permite definir acciones y resultados. Los widgets SVG se integran en un documento HTML a través de un elemento „“ y luego se pueden configurar a través de un elemento „“. En qué medida las entradas realizadas a través de „“ afectan al archivo SVG se define dentro del propio SVG.

Para que el marco funcione, deberá integrar el archivo JavaScript svidget.js en su documento HTML, así como el archivo SVG respectivo.

Configuración de parámetros en el archivo SVG

Utilizando svidget.js, también es posible unir un mismo archivo SVG pero con diferentes apariencias en un mismo documento HTML. Aquí, los parámetros que se deben considerar se establecen dentro del SVG.

<svidget:params>
  <svidget:param name="backgroundColor" type="string" subtype="color" binding="#[email protected]" />
  <svidget:param name="borderColor" type="string" subtype="color" binding="#[email protected]" />
  <svidget:param name="borderWidth" type="number" binding="#[email protected], #[email protected]" />
</svidget:params>

Los parámetros individuales se fijan a través de „“ dentro del elemento „“. Estos interpretarán las entradas que realizó en los elementos „“ del documento HTML de integración más adelante. Aparte de un nombre, cada valor que se espera se establece a través de «tipo» y «subtipo». Las dos primeras entradas, por ejemplo, esperan una cadena de caracteres que debe describir un color, la tercera espera un número.

A través de «enlace», puede elegir lo que debería suceder con el valor. La cadena de caracteres antes del símbolo @ describe el ID del formulario SVG y la cadena detrás define el atributo del formulario que se supone que debe mantener el valor. El valor «#[email protected]“ asigna el color que definió a través de „backgroundColor“ al rasgo de „relleno“ de la forma con el ID „elementA“.

Por último, pero no menos importante, debe vincular el archivo JavaScript.

<script type="application/javascript" xlink:href="https://www.noupe.com/design/svidget.js"></script>

Incrustar el widget SVG en el documento HTML

En el siguiente paso, incorporará el archivo SVG en un documento HTML. Para ello, utilice el elemento „“.

<object data="star.svg" role="svidget" id="star" type="image/svg+xml" width="200" height="200">
  <param name="borderColor" value="red" />
  <param name="backgroundColor" value="green" />
  <param name="borderWidth" value="3" />
</object>

Se hace referencia al archivo SVG a través de «datos». Es importante que el valor „svidget“ se establezca a través de „role“. Solo entonces, el marco sabe que se supone que el SVG debe tratarse como un widget SVG. Con los elementos „“, ahora puede elegir un color de fondo, así como el color y la intensidad del marco. Los nombres de los elementos „“ individuales deben coincidir con los nombres de los respectivos nombres „“ en el mismo SVG.

Alteró la apariencia de la estrella a través de elementos „“

Elija Acciones

Las acciones que puedes definir con los elementos „“ y „“, son las que habilitan la interactividad.

<svidget:actions>
  <svidget:action name="backgroundColorChange" binding="changeBackgroundColor">
    <svidget:actionparam name="newBackgroundColor" type="string" subtype="color" />
  </svidget:action>
</svidget:actions>

En el ejemplo anterior, se está definiendo una acción llamada „backgroundColorChange“. Usé «enlace» para ingresar el nombre de una función que se supone que debe ejecutarse cuando se accede a través del documento HTML. „“ le permite definir parámetros que se transfieren al widget SVG en el documento HTML usando JavaScript.

function changeBackgroundColor(newBackgroundColor) {
  svidget.current().param("backgroundColor").value(newBackgroundColor);
}

La función «cambiar color de fondo ()» dentro del SVG cambia el color de fondo del widget SVG con el valor ingresado en «nuevo color de fondo».

Dentro del documento HTML, puede configurar un detector de eventos que invoque la acción en el elemento SVG con un clic en un elemento.

document.getElementById("button").addEventListener("click", function() {
 svidget.widget("star").action("backgroundColorChange").invoke("red");
}, false);

En este ejemplo, al hacer clic en el elemento con el ID „botón“ en el widget SVG con el ID „estrella“, se produce la acción „backgroundColorChange“. A través de „invocar()“, se transfiere un valor, en este caso la información de color „rojo“. La función «cambiar color de fondo ()» dentro del SVG asegura que el parámetro «color de fondo» se cambie al valor «rojo» al hacer clic.

Aspecto de la estrella después de la acción „backgroundColorChange“

SVG interactivo: establecer eventos

Otra característica de svidget.js es la definición de eventos. Esto le permite reaccionar a eventos dentro de un SVG utilizando el documento HTML. Para hacerlo, debe configurar un evento, de forma similar a las acciones dentro del archivo SVG, a través de „“ y „“.

<svidget:events>
  <svidget:event name="changeComplete" />
</svidget:events>

Posteriormente, debe definir un punto en el SVG en el que se notará en el documento HTML que se ha producido el evento. Esto se puede hacer en el «cambio de color de fondo ()», por ejemplo.

function changeBackgroundColor(newBackgroundColor) {
  svidget.current().param("backgroundColor").value(newBackgroundColor);
  svidget.current().event("changeComplete").trigger();
}

La línea adicional se asegura de que el evento „changeComplete“ sea iniciado por „trigger()“. Dentro del archivo HTML, ahora debe decidir qué desea que suceda cuando el widget SVG active el evento.

svidget.loaded(function (e) {
  svidget.widget("star").event("changeComplete").on(function() {
    console.log("Ready!");
  });
});

En el ejemplo, el evento invoca una función que escribe algo en la consola del navegador. Esto significa que tan pronto como se ejecuta la función «cambiar color de fondo ()» en el SVG, el documento HTML escribe en la consola a través de «console.log ()».

SVG interactivo: casos de uso

Las posibilidades que presentamos aquí son solo una pequeña parte de una gama mucho más amplia de funciones proporcionadas por svidget.js. El marco también es muy útil para mostrar diagramas a través de SVG. Dentro del SVG, se pueden configurar las formas de un gráfico circular o de barras. Los parámetros le permitirán ingresar valores y etiquetas. El mismo SVG se puede mostrar de múltiples maneras diferentes.

Hay una extensa documentación así como muchos ejemplos que reflejan las diferentes áreas de aplicación de JavaScript. El marco está disponible de forma gratuita bajo la licencia liberal MIT y también es de uso gratuito con fines comerciales. Funciona sin dependencias adicionales.

(dpe)