Animation d'un objet SVG avec JavaScript sur clic

Avec JS de base

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

Le code SVG correspondant

<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.

Avec jQuery

Reprenons le même thème mais cette fois-ci utilisons le célèbre framework jQuery.

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

Code HTML et SVG

N'oubliez pas dans la partie HEAD de charger la bibliothèque jQuery.
Le code SVG est inchangé par rapport à la première version.
Donc le rayon est un attribut et l'opacité est une propriété CSS !

Le script

	var rond2 = $('circle:last') ; 
	var rayon2 = rond2.attr('r'); 
	rayon2 = parseInt(rayon2); 
	var opacite2 = rond2.css("fillOpacity");
	opacite2 =parseFloat(opacite2);
	rond2.click(function() 
	{
		opacite2 = opacite2 + 0.05 ; 
		rayon2 = rayon2 + 10 ; 
		rond2.attr("r",rayon2);
		rond2.css("fillOpacity",opacite2);  
    });

Il s'agit du dernier élément de type "circle" de la page.
La syntaxe d'une fonction anonyme est en jQuery différente de JS de base ; les événements ne sont pas préfixés ("click" et non pas "onclick").
On retrouve les méthodes attr() & css() qui sont en même temps "setter" et "getter".
Retour menu