Script JavaScript SVG

En utilisant JavaScript, vous pouvez écrire des scripts SVG. Grâce aux scripts, vous pouvez modifier les éléments SVG, leur ajouter des animations ou écouter les événements souris sur les formes. Lorsque SVG est intégré dans une page HTML, vous pouvez utiliser les éléments SVG en JavaScript.

Vous pouvez écrire des scripts SVG en JavaScript. En écrivant des scripts, vous pouvez modifier les éléments SVG, configurer leurs animations ou écouter les événements souris sur les formes.

Lorsque SVG est intégré dans une page HTML, vous pouvez utiliser les éléments SVG en JavaScript, comme s'ils étaient des éléments HTML. Le JavaScript a l'air identique.

Cet article vous montre comment traiter les éléments SVG avec JavaScript, mais n'explique pas JavaScript lui-même. Pour comprendre les exemples de cet article, vous devez déjà avoir une certaine connaissance de JavaScript.

Exemple de script SVG

Ceci est un exemple simple de script SVG, qui change la taille du rectangle SVG au clic sur le bouton.

<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", "10);
　　　　}
</script>

Cliquez sur le bouton pour voir ce qui se passe.

Obtenir une référence à l'élément SVG via l'ID

Vous pouvez utiliser la fonction document.getElementById() pour obtenir une référence à la forme SVG. Voici un exemple :

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

Dans cet exemple, nous obtenons une référence à l'ID rect1de la référence à l'élément SVG (l'ID est spécifié dans l'attribut id de l'élément SVG).

Modifier la valeur de l'attribut

Une fois que vous avez obtenu une référence à l'élément SVG, vous pouvez utiliser la fonction setAttribute() pour modifier ses attributs. Voici un exemple :

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

Dans cet exemple, nous configurons l'attribut width de l'élément SVG sélectionné. Vous pouvez utiliser la fonction setAttribute() pour configurer n'importe quel autre attribut, y compris l'attribut style.

Vous pouvez également utiliser la fonction getAttribute() pour obtenir la valeur de l'attribut. Voici un exemple :

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

Modifier les attributs CSS

En utilisant l'attribut style des éléments SVG, vous pouvez modifier les attributs CSS des éléments SVG. Voici un exemple de configuration de l'attribut CSS stroke :

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

Vous pouvez également configurer toute autre propriété CSS de cette manière. Il suffit de placer le nom de la propriété après svgElement.style. sur la deuxième ligne, puis de le définir sur une certaine valeur.

Vous pouvez également lire les valeurs des propriétés CSS via la propriété style. Voici un exemple :

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

Dans cet exemple, la valeur de la propriété CSS stroke est lue.

Les noms de propriétés CSS contenant des tirets (par exemple stroke-width) doit être référencé via la construction [''].

element.style.stroke-width

Au lieu de cela, vous devez écrire

element.style['stroke-width']

De cette manière, vous pouvez également utiliser les tirets dans le nom pour faire référence aux propriétés CSS.

écouteurs d'événements

Vous pouvez également ajouter des écouteurs d'événements directement aux formes SVG selon vos besoins. Agissez comme avec des éléments HTML. Voici un exemple d'ajout d'écouteurs d'événements onmouseover et 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>

Dans cet exemple, la couleur du trait et la largeur du trait sont modifiées lorsque le curseur est sur le rectangle, et elles sont réinitialisées lorsque le curseur quitte le rectangle. Vous pouvez essayer l'exemple suivant. Essayez de déplacer le curseur sur la forme, puis de le faire sortir, pour voir l'effet de l'écouteur d'événement.

Vous pouvez également utiliser la fonction addEventListener() pour ajouter des écouteurs d'événements à un élément SVG. Voici un exemple :

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("événement déclenché !");
}

This example adds an event listener function named MouseOver to the MouseOver event. This means that the event listener function will be called as soon as the user hovers the mouse over the SVG element.

Animating SVG shapes

To make SVG shapes have animation effects, you need to call the JavaScript function repeatedly. The function is used to change the position or size of the shape. When the function is called repeatedly and the interval is very short, the position or size of the shape will also be updated at a very short interval, making the shape look like an animation.

This is an SVG script animation example. The code to create it is shown below the example. Click the two buttons below the SVG image to start and stop the animation.

This is the code required to generate the above animation:

<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="Start animation" onclick="startAnimation();">
<input type="button" value="Stop animation" onclick="stopAnimation();">

Ces deux boutons HTML ont un écouteur d'événement onclick. Ces écouteurs d'événements appellent les fonctions startAnimation() et stopAnimation(), utilisées pour démarrer et arrêter l'animation. L'animation commence par un chronomètre, qui chaque20 millisecondes pour appeler la fonction Animate(). Pour arrêter cette fonction de délai, supprimez à nouveau cette fonction de délai.

L'animation s'exécute à l'intérieur de la fonction animate(). Premièrement, la fonction obtient une référence à l'élément <circle> de l'image SVG via la fonction document.getElementById(). Ensuite, lire l'attribut cx du cercle et le convertir en nombre. Ensuite, mettez2Ajoutez à la valeur de cx. Si la nouvelle valeur de x est supérieure à500, alors réinitialisez-le à20. Enfin, placez la nouvelle valeur de x dans l'attribut cx de l'élément <circle>. Le cercle se déplace donc à la nouvelle position x.