Dessiner avec SVG - sommaire

Animer des objets SVG via JavaScript

Jusqu'à présent nous avons animé les éléments SVG via le SMIL. Mais il existe deux autres solutions : animer avec JavaScript ou animer avec CSS.
La solution JavaScript est la plus pertinente en cas d'animation complexe ; par exemple une animation qui ne se contente pas de restyliser des objets SVG mais aussi de modifier leurs attributs voire de créer de nouveaux objets.

Animation basique via JavaScript

Le rond rouge est de plus en grand et de plus opaque puis c'est l'inverse et le cycle reprend à l'infini ...

Le rendu

Le code SVG de la page

Le script correspondant

	var X = 400 ; //largeur définie dans le viewbox
	var rond = document.querySelector('circle') ; 
	var rayon = rond.getAttribute('r'); 
	rayon = parseInt(rayon) ;
	var opacite =rond.style.fillOpacity ;
	opacite =parseFloat(opacite);
	var v_rayon = 2; var v_opacite = 0.01 ;
	setInterval(animate,100) ; 
	function animate() 
	{
		if (rayon >= X/4) { v_rayon = -2 ;v_opacite = -0.01; }
		if (rayon <= 10) { v_rayon = 2 ; v_opacite = 0.01;  }
		rayon += v_rayon ; 
		opacite += v_opacite; 
		rond.setAttribute('r',rayon) ; 
		rond.style.fillOpacity = opacite ; 
	} // fin fonction animate

Ici il faut modifier la valeur de la propriété opacity et la valeur de l'attribut r de l'objet de type "circle".
var rayon = rond.getAttribute('r') : récupère la valeur de l'attribut r de l'objet référencé "rond".
Attention la méthode getAttribute() retourne une chaine numérique donc il faut convertir en entier avant toute incrémentation.
var opacite =rond.style.fillOpacity : la variable opacité récupère la valeur de la propriété de style fill-opacity. Mais dans un script il faut écrire fillOpacity (syntaxe JavaScript).
La variable opacite récupère une chaine ; il faut donc la convertir sous forme d'un décimal.

La animate qui modifie le rayon du cercle et son opacité.
Cette fonction est appelée tous les 100 millisecondes donc 10 fois par seconde grâce au timer setInterval().

Étudions maintenant de plus près la fonction animate !
Pour changer la valeur d'un attribut il faut utiliser la syntaxe : élément.setAttribute("attribut",nouvelle valeur).
Pour changer la valeur d'une propriété de style il faut utiliser la syntaxe : élément.style.propriété = nouvelle valeur.
La variable v_rayon (variation du rayon) est tantôt égale à 2 et tantôt égale à -2. Donc l'instruction rayon += v_rayon incrémente ou décrémente la variable rayon.
La valeur de rayon est au maximum de X/4 et au minimum de 10.
La variable v_opacite (variation de l'opacité) est tantôt égale à 0.01 et tantôt égale à -0.01. Donc l'instruction opacite += v_opacite incrémente ou décrémente la variable opacite.

Déplacements de "sprites"

On désigne par "sprites" les personnages d'une animation. Il s'agit souvent de GIF animés.

Ici on se contente d'intégrer deux gif animés avec la balise image du format SVG puis on les déplace via le script.

Le rendu

Le code SVG dans la page

Le code SVG :
• on définit un canevas SVG avec un repère cartésien de 900 par 100 ; cette zone de dessin a pour "background" un dégradé linéaire.
• on définit deux groupes de formes identifiés "bosquet" et "muret"
• on dessine le décor en clonant les groupes "bosquet" et "muret" qui avait été définis
• on incorpore dans le canevas deux images existantes (des gif animés) et identifiées respectivement chat et chien.

Ce code SVG constitue une bonne révision des éléments G,use & image.

Le script correspondant

var chien = document.querySelector('#chien');
var chat = document.querySelector('#chat');
var X = 900; // X récupère la largeur du viewBox
var x_chien = 10 ;
var x_chat = 110; 
setInterval(animate,50) ; 

function animate() 
{ 	
	x_chien = x_chien + 2 ; 	
	if(x_chien >= X)  x_chien = -90 ; x_chat = x_chien + 100 ; 		
	chien.setAttribute('x', x_chien); 
	chat.setAttribute('x', x_chat); 
}

Le code JS est très simple. Dans le cadre d'une fonction animate (qui est exécutée 20 fois par seconde) on se contente de changer la valeur de l'attribut x des objets SVG chien et chat donc on génère un déplacement des sprites sur l'axe des X.

Animer avec le clavier

Il s'agit d'une préparation aux jeux vidéos en SVG.

Un billard avec une boule

Déplacez la boule avec les touches directionnelles du clavier.

Ci-dessous le code de ce document HTML

Le code HTML & SVG

Le script (extrait)

var billard = document.querySelector('#billard');
var boule = document.querySelector('#boule'); 
	
// programmation des touches de direction
document.onkeydown = function(event)
{	
	if (event.keyCode == 37)  gauche(); 
	if (event.keyCode == 39) droite() ; 
	if (event.keyCode == 38) haut();  
	if (event.keyCode == 40) bas() ; 
} 

// quatre fonctions de déplacement
function gauche() 
	{var x = boule.getAttribute('cx'); 
	console.log(typeof x);  
	x= parseInt(x) ;  
	x-=20; 
	boule.setAttribute('cx',x); }
function droite() 
		...
function haut() 
	{var y = boule.getAttribute('cy');
	console.log(typeof y); 
	x= parseInt(y) ; 
	y-=20;  
	boule.setAttribute('cy',y); }
function bas()
		...

La méthode getAttribute() retourne un "string" comme l'indique la console JS. Donc pensez à convertir avant d'incrémenter !

Si vous avez des difficultés à comprendre la programmation du clavier en JS :
Gestion des évènements par JS

Version améliorée

Le billard est bien "tristouné" : aucun effet 3D ; la boule peut sortir du billard.
Toutes ces insuffisances sont résolues dans une nouvelle version en lien ci-dessous.

Rendu de la version améliorée

Améliorations apportées

Le billard est désormais borduré et ombré.
La boule est aussi ombrée
La boule ne peut plus sortir du billard.

Le code correspondant

À vous de reconstituer le code à partir de la version initiale et de vos connaissances.
J'ai rajouté une feuille de style interne (avec la définition d'un flou) et j'ai modifié le script ; c'est tout !

Créer de nouveaux éléments SVG dans le canevas

L'insertion de nouveaux éléments HTML dans une page via JavaScript est facile.
L'insertion de nouveaux objets SVG dans un canevas est un peu plus délicate ...

Le rendu d'un document HTML

Ce document comprend du SVG interne.

Le code CSS, HTML & SVG de ce document

Notez l'utilisation d'un filtre CSS (via la classe "flou1") pour flouter un objet SVG.
Les navigateurs récents autorisent en effet l'application de filtres CSS à des objets SVG.
C'est un réel progrès car la syntaxe CSS des filtres est beaucoup plus simple que la syntaxe SVG.
Filtrer éléments SVG
Deux rectangles occupant toute le canevas : un rempli de noir et un autre au dessus rempli de bleu et identifié "ciel".
Le cercle orange flouté (le soleil) est dessiné au dessus.

Le script du document

var compteur = 0 ;
var svg = document.querySelector('svg'); 
var noir = document.getElementById("noir"); 
var bleu = document.getElementById("bleu");
var soleil = document.getElementById("soleil"); 

function coucher_soleil() 
{
	// soleil descend doucement
	soleil.setAttribute("cy", 250+(compteur*2));  
	
	// fond bleu devient progresssivement transparent donc le ciel devient noir
	bleu.setAttribute("opacity", (100-compteur)/100); 
	
	// création d'un nouvel élément SVG
	etoile = document.createElementNS("http://www.w3.org/2000/svg", "circle");
	etoile.setAttribute("fill", "orange");
	etoile.setAttribute("cx", Math.random()*800);
	etoile.setAttribute("cy", Math.random()*400);
	etoile.setAttribute("r", 2);
 	//insertion de cet élément dans le canevas
	svg.appendChild(etoile); 
	
	compteur++;
	// appel récursif de la fonction 
	if (compteur<= 100) setTimeout(coucher_soleil, 200);
} // fin fonction 
coucher_soleil();		//démarrer animation

Dans la fonction "coucher_soleil" :
• l'ordonnée du "soleil" devient de plus en grande donc le soleil descend vers l'horizon
• le rectangle rempli de bleu devient de plus en plus transparent donc le ciel devient progressivement noir
• un objet de type "circle" et référencé "etoile" est créé et reçoit des attributs : cx, cy, r
• il faut ensuite insérer ce nouvel objet dans le canevas

La fonction "coucher_soleil" est exécutée toutes les 200 millisecondes seulement 100 fois. Donc l'animation a une durée limitée.
Notez qu'elle s'appelle elle-même (récursivité). Donc pour que démarre l'animation il faut un premier appel de cette fonction : dernière instruction du script.

Syntaxe

Notez bien la syntaxe d'une des instructions :
document.createElementNS("http://www.w3.org/2000/svg", "circle")
Si vous avez visité le tutoriel "javaScript "dans le même site vous savez qu'il est possible de créer de nouveaux éléments HTML en utilisant la méthode createElement().

Pour créer un nouvel objet SVG, il faut utiliser la méthode createElementNS.
Dans cette méthode il faut préciser l'espace de nommage ("http://www.w3.org/2000/svg") et le type de forme crée.

Prolongements

Vous avez deviné, je pense, que l'on peut réaliser des jeux vidéos en combinant SVG & JS.
Jeux vidéos avec SVG-JS

Vous pouvez aussi animer des objets SVG via le CSS3. Dès que la spécification SVG2 sera implémentée par tous les navigateurs les possibilités d'animation via le CSS seront sensiblement élargies. Voir le chapitre suivant !