Création de nouveaux noeuds SVG via JS

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

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 rajouter une instruction : 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 noeud 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 nouveau noeud HTML mais d'un nouvel élément SVG !!!
Ensuite pour insérer le nouvel élément SVG dans le DOM on doit utiliser La méthode insertBefore qui est moins intuitive que appendChild

Prolongements

Moyennant quelques lignes de code SVG & JS supplémentaires il serait possible de complexifier l'animation : apparition progressive de la lune dans le ciel noir.
C'est pas compliqué un grand cercle jaune (pleine lune) d'abord transparent devient de plus en plus opaque et monte progressivement dans le ciel étoilé.
Pour vérifier si vous avez assimilé le code proposé essayez de produire ce prolongement.
Retour menu