Snap SVG : chemins, masques et découpes

Avec Snap SVG un chemin peut être noté en relatif (comme en SVG.
Pour réduire les lignes de code il ne faut pas hésiter à grouper les formes car la méthode attr() peut s'appliquer à un groupe !
Le clonage doit aussi être utilisé sans aucune modération.
Les outils "masque" et "découpe" sont aussi disponibles avec Snap SVG.

Les chemins avec Snap SVG

Objectif : dessiner un sapin de Noël. Il est préférable de réaliser d'abord un croquis sur une feuille à petit carreaux. Ce n'est pas une perte de temps bien au contraire ...

Ci-dessous le croquis

Grâce à ce schéma je détermine facilement les arguments du chemin.
Je vois que si je code le chemin en relatif, je vais avoir des couples 'l 50 50' et des couples 'h-25' puis des couples 'l 50 -50' ...

Le code correspondant

CSS & HTML

...
<style>
	.ligne {fill : none ; stroke : gold ; stroke-width : 2px ; }

...
<svg viewBox ="0 0 400 300"  width ="80%"  id ="zone"> </svg>
...

Une classe "ligne" pour colorier certains chemins.

Le script

	var s = Snap("#zone") ;
	var branches =s.path("M 200 50 l50 50 h-25 l 50 50 h-25 
		l 50 50 l -200 0 l 50 -50 h-25  l 50 -50 h-25 z").attr({fill : "green"});
	var tronc = s.rect(175,200,50,50).attr({fill : "maroon"});
	// groupage
	var sapin =s.group(branches,tronc); 
	// définition de filtres
	var f1 = s.filter(Snap.filter.blur(2,2));
	var f2 = s.filter(Snap.filter.shadow(10, 10, .5));
	//floutage et ombrage du sapin
	sapin.attr({filter : f1});     
	sapin.attr({filter : f2});   
	// ajout guirlande
	var guirlande =s.polyline(175,75, 225,100,  150,150, 250,150, 125,175).attr({class :"ligne"});
	// ajout boules
	var boule = s.circle(250,100,5).attr({fill : "gold"});
	boule.clone().attr({cx : 150, cy : 100}); 
	boule.clone().attr({cx : 125, cy : 150});
	boule.clone().attr({cx : 275, cy : 150});
	boule.clone().attr({cx : 275, cy : 150});
	boule.clone().attr({cx : 100, cy : 200});                   
	boule.clone().attr({cx : 300, cy : 200});

Notez le chemin exprimé en relatif pour dessiner le branchage. Pas de virgules entre les x et y !
Si vous ne comprenez rien dans ce code vous devez visiter la page sur les chemins dans ce même tuto.
Les deux filtres (floutage, ombrage) sont appliqués à "sapin" qui est un groupe de formes (branches + tronc).
Emploi de la méthode polyline() pour dessiner la guirlande. A la différence de polygone le chemin n'est pas fermé. J'aurais pu utiliser path().
Je ne dessine qu'une boule ; les autres sont des clones de la première.

Le rendu

Le sapin est légèrement flouté et ombré.
Il comporte une guirlande et des boules.

Masque et découpe

Si ces deux termes ne signifient rien pour vous, je vous conseille de revoir le chapitre "degradés, motifs, masques et découpes" dans le même tuto.

Exemple

Ci-dessous une image insérée dans un canevas et bénéficiant d'un masque et d'une découpe.

L'image apparait dans une ellipse avec deux zones plus ou moins transparentes.

Le script correspondant

Il y a bien sûr une instruction HTML pour créer le canevas 'responsive' identifié "zone1". var s1 = Snap("#zone1") ; var rect1 = s1.rect(0,0,500,300).attr({fill: "white", fillOpacity : 0.4}); var rect2 = s1.rect(0,300,500,300).attr({fill: "white", fillOpacity : 0.2}); var masque = s1.group(rect1,rect2); // définition d'un masque comprenant deux parties avec des opacités différentes var decoupe = s1.ellipse(250,300,200,300).attr({fill : "none"}); // définition d'une découpe s1.image("../images/jolie_fille.jpg",0,0,500,600).attr({mask : masque, clipPath : decoupe}); // application à l'image insérée du masque et la découpe

Notez les commandes "mask" et "clipPath" dans la méthode attr().

Une bannière avec Snap SVG

Le rendu

Le code correspondant

CSS & HTML

	...
	.forme1{fill : none ; font-size : 40px ; stroke : black ; stroke-width : 2px ; text-anchor : middle ; 
		text-shadow : 5px 5px 5px gray ; }
	...
	<svg viewBox ="0 0 600 100"  width ="100%"  id ="zone3"
		style ="background: linear-gradient(to right, blue,skyblue, white) ;"> 
	</svg>

On ne peut pas appliquer la propriété box-shadow à un élément SVG. Par contre la propriété text-shadow est compatible !
Je rappelle que la propriété CSS text-anchor spécifique au texte SVG aligne le texte horizontalement ; si sa valeur est "middle" alors disposition du texte autour du point X.
La balise SVG étant un élément HTML de type "block" on peut lui appliquer un dégradé CSS.

Le script

Vous allez aimer Snap ...
Le script est des plus succinct. var s2 = Snap("#zone2") ; var contenu ="Snap SVG, c'est magique !!!"; var texte = s2.text(300,70, contenu); texte.attr({class : "forme1"});

La méthode Snap.set()

"Set" veut dire ensemble.
Avec la méthode Snap.set() on peut définir un ensemble de formes, lui donner un nom et le styler.
Nous verrons l'animation d'une "set" plus tard. Pour le moment je me contenterai de vous montrer qu'avec un script très court on peut créer une multitude de formes avec cet outil.

Ci-dessous une zone de dessin remplie de 4 ronds rouges transparents et ombrés.

Le script correspondant

	var s3 = Snap("#zone3"); 
	var ombrage = s3.filter(Snap.filter.shadow(10, 10, .5));
	serie = Snap.set(s3.circle(30, 30,20), s3.circle(100, 100, 30),
		s3.circle(200,200,40), s3.circle(300,300,50));
	var param = {fill : "red", fillOpacity : .2, filter : ombrage};
	serie.attr(param);

Et oui. Seulement 5 instructions pour dessiner et styler quatre ronds qui constituent un "set" dénommé "serie".

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Snap SVG : chemins, masques et découpes

Les chemins avec Snap SVG

Ci-dessous le croquis

Le code correspondant

CSS & HTML

Le script

Le rendu

Masque et découpe

Exemple

Le script correspondant

Une bannière avec Snap SVG

Le rendu

Le code correspondant

CSS & HTML

Le script

La méthode Snap.set()

Le script correspondant