Script de JavaScript en SVG

Con JavaScript, se puede escribir un script SVG. A través del script, puede modificar los elementos SVG, establecer animaciones o escuchar eventos de ratón en las formas. Cuando SVG se inserta en una página HTML, se pueden usar elementos SVG en JavaScript.

Se puede escribir un script SVG utilizando JavaScript. Al escribir un script, puede modificar elementos SVG, configurar sus animaciones o escuchar eventos de ratón en las formas.

Cuando SVG se integra en una página HTML, se puede usar el elemento SVG en JavaScript como si fuera un elemento HTML. JavaScript se ve igual.

Este artículo le muestra cómo manejar elementos SVG con JavaScript, pero no explica JavaScript en sí. Para entender los ejemplos de este artículo, debe tener un conocimiento previo de JavaScript.

Ejemplo de script SVG

Este es un ejemplo simple de script SVG, que cambia el tamaño del rectángulo SVG al hacer clic en el botón.

<svg width="500" height="100">
　　　　<rect id="rect1" x="10" y="10" width="50" height="8"
　　　　　　　　　　style="stroke:#000000; fill:none"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function changeDimensions() {
　　　　　　　　document.getElementById("rect1).setAttribute("width", "10);
　　　　}
</script>

Intente hacer clic en el botón para ver qué sucede.

Obtener referencia al elemento SVG a través de ID

Puede usar la función document.getElementById() para obtener una referencia a la forma SVG. Aquí hay un ejemplo:

var svgElement = document.getElementById("rect1);

Este ejemplo obtiene una referencia al elemento rect con ID1de la referencia del elemento SVG (el ID se especifica en la propiedad id del elemento SVG).

Cambiar valor de propiedad

Una vez que se tiene una referencia al elemento SVG, se puede usar la función setAttribute() para cambiar sus propiedades. Aquí hay un ejemplo:

var svgElement = document.getElementById("rect1);svgElement.setAttribute("width", "10);

Este ejemplo establece la propiedad width del elemento SVG seleccionado. Puede usar la función setAttribute() para establecer cualquier otra propiedad, incluyendo la propiedad style.

También puede usar la función getAttribute() para obtener valores de propiedades. Aquí hay un ejemplo:

var svgElement = document.getElementById("rect1);var width = svgElement.getAttribute("width");

Cambiar propiedades CSS

Al referenciar propiedades CSS dadas a través de la propiedad style del elemento SVG, se pueden cambiar las propiedades CSS del elemento SVG. A continuación, se muestra un ejemplo de cómo establecer la propiedad CSS de stroke:

var svgElement = document.getElementById("rect1);
svgElement.style.stroke = "#ff0000";

您也可以通过这种方式设置任何其他CSS属性。只需将其名称放在svgElement.style. 上面的第二行，然后将其设置为某种值即可。

您还可以通过style属性读取CSS属性的值。这是一个示例：

var svgElement = document.getElementById("rect1);
var stroke = svgElement.style.stroke;

本示例读取stroke CSS属性的值。

名称中包含短划线的CSS属性名称（例如stroke-width）需要通过['']构造进行引用。这样做是因为带有短划线的属性名称在JavaScript中无效。因此你不能写

element.style.stroke-width

相反，你必须写

element.style['stroke-width"]

这样，您还可以使用名称中的破折号来引用CSS属性。

事件监听器

您可以根据需要直接在SVG中将事件监听器添加到SVG形状中。就像使用HTML元素一样进行操作。这是一个添加onmouseover 和 onmouseout事件监听器的示例：

<svg width="500" height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] =　5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] =　1;"　　　　
/>　　　　
</svg>

此示例在鼠标悬停在矩形上时更改笔触颜色和笔触宽度，并在鼠标离开矩形时重置笔触颜色和笔触宽度。您可以尝试下面的示例。尝试将鼠标移到形状上，然后再次移出，以查看事件监听器的效果。

还可以使用addEventListener()函数将事件监听器附加到SVG元素。这是一个示例：

var svgElement = document.getElementById("rect1);
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("¡evento disparado!");
}

Este ejemplo agrega una función de escucha de eventos de MouseOver llamada MouseOver al evento MouseOver. Esto significa que se llama a la función de escucha de eventos siempre que el usuario coloca el ratón sobre el elemento SVG.

Animar forma SVG

Para que las formas SVG tengan efectos de animación, debe llamar repetidamente a la función JavaScript. La función se utiliza para cambiar la posición o el tamaño de la forma. Cuando la función se llama repetidamente y con intervalos muy cortos, la posición o el tamaño de la forma también se actualiza con intervalos muy cortos, lo que hace que la forma parezca que se está animando.

Este es un ejemplo de animación de script SVG. A continuación, se muestra el código que lo crea. Haga clic en los dos botones debajo de la imagen SVG para comenzar y detener la animación.

Este es el código necesario para generar la animación anterior:

<svg width="500" height="100">
　　　　<circle id="circle1" cx="20" cy="20" r="10"
　　　　　　　　　　　　style="stroke: none; fill: #ff0000;"/>
</svg>
<script>
　　　　var timerFunction = null;
　　　　function startAnimation() {
　　　　　　　　if(timerFunction == null) {
　　　　　　　　　　　　timerFunction = setInterval(animate,　20);
　　　　　　　　}
　　　　}
　　　　function stopAnimation() {
　　　　　　　　if(timerFunction != null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction = null;
　　　　　　　　}
　　　　}
　　　　function animate() {
　　　　　　　　var circle = document.getElementById("circle1);
　　　　　　　　var x = circle.getAttribute("cx");
　　　　　　　　var newX =　2　+　parseInt(x);
　　　　　　　　if(newX >　500) {
　　　　　　　　　　　　newX =　20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx", newX);
　　　　}
</script>
<br/>
<input type="button" value="Iniciar animación" onclick="startAnimation();">
<input type="button" value="Detener animación" onclick="stopAnimation();">

Estos dos botones HTML tienen un listener onclick. Estos listeners llaman a las funciones startAnimation() y stopAnimation(), que se utilizan para iniciar y detener la animación. La animación se inicia mediante un temporizador que se ejecuta cada2milisegundos para llamar a la función Animate(). Vuelva a establecer esta función de temporizador para detener la animación.

La animación se ejecuta internamente en la función animate(). Primero, la función obtiene una referencia al elemento <circle> en la imagen SVG mediante la función document.getElementById(). Luego, se lee el atributo cx del círculo y se convierte en un número. Luego, se2Agregue al valor de cx. Si el nuevo valor de x es mayor que500, entonces restablezcalo a2La última, coloque el nuevo valor de x en el atributo cx del elemento <circle>. Por lo tanto, el círculo se mueve a la nueva posición x.