Script JavaScript SVG

Puoi scrivere script SVG con JavaScript. Attraverso la scrittura di script, puoi modificare gli elementi SVG, impostare animazioni per loro o ascoltare eventi del mouse sulle forme. Quando SVG è integrato in una pagina HTML, puoi utilizzare gli elementi SVG in JavaScript.

Puoi scrivere script SVG con JavaScript. Scrivendo script, puoi modificare gli elementi SVG, impostare animazioni per loro o ascoltare eventi del mouse sulle forme.

Quando SVG è integrato in una pagina HTML, puoi utilizzare gli elementi SVG in JavaScript come se fossero elementi HTML. JavaScript sembra lo stesso.

Questo articolo ti mostra come gestire gli elementi SVG con JavaScript, ma non spiega JavaScript stesso. Per comprendere gli esempi di questo articolo, devi avere una certa conoscenza di JavaScript.

Esempio di script SVG

Questo è un esempio semplice di script SVG, che cambia le dimensioni del rettangolo SVG quando si clicca sul pulsante.

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

Clicca sul pulsante per vedere cosa succede.

Ottieni la referenza all'elemento SVG tramite l'ID

Puoi ottenere la referenza a una forma SVG utilizzando la funzione document.getElementById(). Ecco un esempio:

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

Questo esempio ottiene la referenza all'elemento SVG con ID rect1 (l'ID è specificato nell'attributo id dell'elemento SVG).

Modificare il valore dell'attributo

Una volta ottenuta la referenza all'elemento SVG, puoi utilizzare la funzione setAttribute() per modificare i suoi attributi. Ecco un esempio:

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

Questo esempio imposta l'attributo width dell'elemento SVG selezionato. Puoi utilizzare la funzione setAttribute() per impostare qualsiasi altro attributo, inclusi gli attributi style.

Puoi anche utilizzare la funzione getAttribute() per ottenere il valore dell'attributo. Ecco un esempio:

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

Modificare l'attributo CSS

Attraverso l'attributo style dell'elemento SVG si può riferire agli attributi CSS assegnati, cambiando così gli attributi CSS dell'elemento SVG. Ecco un esempio di come impostare l'attributo CSS stroke:

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

Puoi anche impostare qualsiasi altra proprietà CSS in questo modo. Basta metterne il nome dopo svgElement.style. sulla seconda riga e impostarlo con un valore.

Puoi anche leggere i valori delle proprietà CSS tramite l'attributo style. Ecco un esempio:

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

Questo esempio legge il valore della proprietà CSS stroke.

I nomi delle proprietà CSS che contengono trattini di meno (ad esempio stroke-width) devono essere richiamati tramite la costruzione ['']. Questo perché i nomi delle proprietà con trattini di meno non sono validi in JavaScript. Pertanto, non puoi scrivere

element.style.stroke-width

Al contrario, devi scrivere

element.style['stroke-width']

In questo modo, puoi anche fare riferimento alle proprietà CSS tramite il nome con trattini di meno. Ad esempio:

ascoltatore di eventi

Puoi aggiungere direttamente un ascoltatore di eventi a un'figura SVG secondo necessità. Come si fa con gli elementi HTML. Ecco un esempio di aggiunta di ascoltatori di eventi onmouseover e 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>

Questo esempio cambia il colore e la larghezza del tratto quando il mouse è sopra il rettangolo e ripristina il colore e la larghezza del tratto quando il mouse lascia il rettangolo. Puoi provare il seguente esempio. Muovi il mouse sopra la forma e poi di nuovo fuori per vedere l'effetto dell'ascoltatore di eventi.

Puoi anche utilizzare la funzione addEventListener() per aggiungere un ascoltatore di eventi a un elemento SVG. Ecco un esempio:

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

Questo esempio aggiunge una funzione di ascoltatore di eventi denominata MouseOver all'evento MouseOver. Questo significa che ogni volta che l'utente posiziona il mouse su un elemento SVG, viene chiamata la funzione di ascoltatore di eventi.

Animazione di forme SVG

Per far avere un'animazione alla forma SVG, è necessario chiamare la funzione JavaScript più volte. La funzione viene utilizzata per cambiare la posizione o la dimensione della forma. Quando la funzione viene chiamata più volte con un intervallo molto breve, la posizione o la dimensione della forma viene aggiornata con un intervallo molto breve, il che fa sembrare alla forma di essere in animazione.

Questo è un esempio di animazione SVG. Sotto l'immagine SVG sono mostrati i codici per creare l'animazione. Clicca sui due pulsanti sotto l'immagine SVG per iniziare e fermare l'animazione.

Questo è il codice necessario per generare l'animazione sopra riportata:

<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="Inizia l'animazione" onclick="startAnimation();">
<input type="button" value="Ferma l'animazione" onclick="stopAnimation();">

Questi due pulsanti HTML hanno un listener onclick. Questi listener chiamano le funzioni startAnimation() e stopAnimation(), che servono a avviare e fermare l'animazione. L'animazione inizia impostando un timer che chiama la funzione Animate() ogni 20 millisecondi. Puoi fermare l'animazione cancellando questa funzione del timer.

L'animazione viene eseguita all'interno della funzione animate(). Prima, la funzione document.getElementById() ottiene un riferimento all'elemento <circle> dell'immagine SVG. Poi, legge l'attributo cx del cerchio e lo converte in numero. Successivamente, aggiunge 2 al valore cx. Se il nuovo valore x è maggiore di 500, lo riporta a 20. Infine, inserisce il nuovo valore x nell'attributo cx dell'elemento <circle>. Di conseguenza, il cerchio si sposta alla nuova posizione x.