SVG & JavaScript : créer de nouveaux éléments SVG

L'insertion de nouveaux éléments HTML dans une page via JavaScript est facile (voir tuto "JavaScript & jQuery").
L'insertion de nouveaux noeud SVG est un peu plus délicate. C'est ce que nous allons traiter dans cette page.

Cette animation SVG pourrait s'appeler "coucher de soleil".
Le soleil descend lentement ; le ciel s'assombrit lentement pour devenir noir ; les étoiles apparaissent.

Pour relancer l'animation actualisez la page !

Le code SVG

<svg width="100%" height="auto" viewBox ="0 0 800 400" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="flou"> <feGaussianBlur stdDeviation="12" /> </filter> </defs> <rect x="0" y="0" height="400" width="800" fill="black"/> <rect x="0" y="0" height="400" width="800" fill="blue" id ="ciel" /> <circle id="soleil" cx="400" cy="250" r="75" fill="orange" filter = 'url(#flou)'/> </svg>

Un flou est défini et s'applique à un cercle orange identifié "soleil".
Deux rectangles occupant toute la zone de dessin : un rempli de noir et un autre au dessus rempli de bleu et identifié "ciel".
Le cercle orange et flouté (soleil) est dessiné au dessus.

Le script

	var compteur = 0 ;
	function coucher_soleil() 
	{
	soleil = document.getElementById("soleil"); 
	soleil.setAttribute("cy", 250+(compteur*2.3));    
	// soleil descend doucment
 
	ciel = document.getElementById("ciel");
	ciel.setAttribute("opacity", (100-compteur)/100); 
	// fond bleu devient doucement transparent donc ciel devient noir
	etoile = document.createElementNS("http://www.w3.org/2000/svg", "circle");
	etoile.setAttribute("fill", "yellow");
	etoile.setAttribute("cx", Math.random()*800);
	etoile.setAttribute("cy", Math.random()*400);
	etoile.setAttribute("r", 2);
 	scene = ciel.parentNode;
	scene.insertBefore(etoile,ciel);
	compteur++;
	if (compteur<= 100)   setTimeout(coucher_soleil, 200);
	} // fin fonction 
	coucher_soleil();		//démarrer animation

La fonction "coucher_soleil" est exécutée toutes les 200 millisecondes et 100 fois.
Notez qu'elle s'appelle elle-même. Donc pour que démarre l'animation il faut surtout un appel de cette fonction : coucher_soleil();

Syntaxe

Si vous avez visité le tutoriel "javaScript & jQuery"(page "manipuler le DOM) dans le même site vous savez qu'il est possible avec JS de créer nouveaux éléments HTML en utilisant les méthodes createElement() et appendChild.

Pour créer et insérer un élément SVG c'est un peu plus compliqué. Il faut utiliser la méthode createElementNS pour préciser l'espace de nommage. Il faut en effet préciser qu'il ne s'agit pas d'un nouvel élément HTML mais d'un nouvel noeud SVG !!!
Ensuite pour insérer le nouvel élément SVG dans le DOM XML on doit utiliser La méthode insertBefore qui est moins intuitive que appendChild
Retour menu