SVG & JavaScript : Animation d'un rond SVG par clic

Cliquez sur le rond pour augmenter son rayon et son opacité

Le code SVG de la page

<svg viewBox ="0 0 400 400" height="50%" width="50%" style = 'background : yellow ;'> <circle cx="200" cy="200" r="10" style = 'fill : red ; fill-opacity : 0.2' /> </svg>

Faut-il rappeler l'intérêt d'exprimer les dimensions de l'image en pourcentages ?
Faut-il rappeler que dès qu'une image vectorielle a sa taille exprimée en pourcentages le viewBox devient obligatoire.

Via le SVG on crée un cercle rouge qui est centré dans la zone de dessin.

Remarquez qu'ici le paramètre fill-opacity est passé en propriété de style et non pas en attribut.

Le script

var rond = document.querySelector('circle') ; var rayon = rond.getAttribute('r'); rayon = parseInt(rayon); var opacite = rond.style.fillOpacity; opacite =parseFloat(opacite); rond.onclick = function() { opacite = opacite + 0.05 ; rayon = rayon + 10 ; rond.style.fillOpacity = opacite ; rond.setAttribute('r',rayon) ; }

Le cercle SVG est référencé dans le script par la variable objet rond.
Dans le script on récupère sous forme de réels la valeur de l'attribut r et la valeur de la propriété de style fill-opacity de l'objet "rond".
Pour récupérer ces paramètres on utilise respectivement les méthodes getAttribute et style (ou getComputedStyle) puisqu'il faut récupérer une valeur d'attribut et une valeur d'une propriété de style.

Une fonction anonyme est appelée à chaque fois que vous cliquez sur le noeud "rond".
Dans cette fonction on change la valeur de l'attribut r et la valeur de la propriété de style fill-opacity
Pour récupérer ces paramètres on utilise respectivement les méthodes setAttribute et style.

Attention en JavaScript la propriété fill-opacity devient fillOpacity !
Souvenez vous de la règle du passage de la syntaxe CSS à la syntaxe JavaScript pour une propriété de style ?
On supprime le tiret et la lettre qui suit passe en majuscule.
Retour menu