SVG : utilisation de calques

Dans cette animation non seulement les "sprites" se déplacent mais le visiteur peut changer le décor.
Dans cette page j'utilise du SVG pour créer les décors, du CSS pour déplacer les "sprites" et du JavaScript pour gérer le changement de décor (changer le calque affiché).

Si vous avez utilisé Inkscape (ou Gimp) vous savez que dès que le dessin a une certaine complexité il est préférable de le répartir sur plusieurs calques. Ici nous avons trois calques : deux pour les décors et un pour l'insertion des "sprites" (GIF animés).
L'un des décors est masqué.
En cliquant sur le bouton de commande on change de décor (appel d'une fonction JS).

Essayez !

Le code SVG de la page

La partie définitions

<svg width="100%" height="auto" viewBox ="0 0 900 240" style = "background : skyblue ;"> <defs> <filter id="ombre"> <feOffset dx="10" dy ="10"/> <feGaussianBlur stdDeviation="2" /> </filter> <g id = "sapin"> <polygon points ="50,0 20,70 80,70" fill = "gray" filter="url(#ombre)" /> <rect x ='45' y = '60' width = '10' height ='40' fill ='maroon' /> <polygon points ="50,0 20,70 80,70" fill = "green"/> </g> <g id ="chalet"> <rect x ='10' y ='40' width ='80' height = '50' fill ='gray' filter="url(#ombre)" /> <rect x = '0' y ='0' width ='100' height = '40' fill = 'gray' /> <rect x ='80' y ='-5' width ='10' height ='20' fill ='red' /> <rect x ='10' y ='40' width ='80' height = '50' fill ='maroon' /> <rect x ='60' y = '50' width ='15' height ='15' fill ='black' /> </g> </defs>

On définit deux groupes de formes identifiés sapin et chalet.
Afin de donner du relief au sapin on crée un effet d'ombre : un triangle gris décalé de 10px, flouté et en arrière plan.
Quant au chalet on crée aussi un effet d'ombre : un rectangle gris décalé de 10px, flouté et en premier plan.
En fait on applique aux deux formes grises un filtre complexe identifié "ombre" et basé sur deux primitives : feOffset et feGaussianBlur.

Les filtres en SVG sont évoqués dans le tutoriel "Dessiner avec SVG".

Le code du premier calque

<g id ="calque0" style = "display : inline ;" > <rect x = "0%" y ="160" width = "100%" height = "100" fill = "white" /> <use xlink:href="#chalet" x="10%" y="110" /> <use xlink:href="#chalet" x="40%" y="120" /> <use xlink:href="#chalet" x="70%" y="100" /> <use xlink:href="#chalet" x="90%" y="110" /> </g>

Calque identifié "calque0".
Clonage de quatre fois du modèle "chalet".
Ce décor est par défaut affiché (display : inline) !

Le code du deuxième calque

<g id ="calque0" style = "display : inline ;" > <rect x = "0%" y ="160" width = "100%" height = "100" fill = "white" /> <use xlink:href="#chalet" x="10%" y="110" /> <use xlink:href="#chalet" x="40%" y="120" /> <use xlink:href="#chalet" x="70%" y="100" /> <use xlink:href="#chalet" x="90%" y="110" /> </g>

Calque identifié "calque1".
Clonage de 8 fois du modèle "sapin".
Ce calque est par défaut masqué (display : none).

<g id ="calque1" style = "display : none ;"> <rect x = "0%" y ="160" width = "100%" height = "100" fill = "white" /> <use xlink:href="#sapin" x="0%" y="110" /> <use xlink:href="#sapin" x="10%" y="120" /> <use xlink:href="#sapin" x="30%" y="110" /> <use xlink:href="#sapin" x="40%" y="100" /> <use xlink:href="#sapin" x="50%" y="120" /> <use xlink:href="#sapin" x="60%" y="110" /> <use xlink:href="#sapin" x="80%" y="100" /> <use xlink:href="#sapin" x="90%" y="120" /> </g>

Le code du troisième calque

<g id ="calque2" style ="display : inline;" > <image x = "10" y="175" width = "80" height="60" xlink:href="../images/fondeur.gif" id ="fondeur1" > </image> <image x="10" y="175" width = "80" height="60" xlink:href="../images/fondeur2.gif" id ="fondeur2"> </image> </g>

Calque identifié "calque2".
Les deux "sprites" sont identifiés "fondeurs1" et "fondeur2".

Le code CSS

@keyframes deplace
	{
	from {}
	to {transform : translateX(1000px);}
	}
#fondeur1 {animation : deplace 20s 0s infinite linear ; }
#fondeur2 {animation : deplace 18s 0s infinite linear ; }

Les deux "sprites" sont animés grâce au CSS.

Ils auraient pu être animés avec le SMIL.

Le script

	function changer()
	{
		var calque0 = document.querySelector('#calque0');
		var calque1 = document.querySelector('#calque1');
		if(calque0.style.display == 'inline') {calque0.style.display ='none' ; calque1.style.display ='inline' ; }
		else  {calque0.style.display ='inline' ; calque1.style.display ='none' ; }
	}

Ce script permet de changer de décor : activer calque1 si calque0 est actif et vice-versa.
Cette fonction JavaScript appelée changer est appelée par un clic sur un bouton de commande. Donc le code HTML est :
<button onclick ='changer()'>Changez de décor !</button>
Retour menu