Avec Snap SVG un chemin peut être noté en relatif (comme en SVG natif).
Pour réduire les lignes de code il ne faut pas hésiter à grouper les formes car certaines méthodes peuvent
s'appliquer à un groupe !
Le clonage doit aussi être utilisé sans aucune modération.
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' ...
La classe "ligne" pour styler la guirlande.
L'instruction HTML qui dessine un canevas vierge ne précise pas la largeur d'affichage et le système
de coordonnées (viewBox).
Le script Snap
var s = Snap("#zone1");
s.attr({viewBox :"0 0 400 300", width : "80%"});
var branches =s.path("M 200 50 l 50 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});
Remarquez la syntaxe pour rajouter le viewBox au canevas SVG.
Notez que le chemin exprimé en relatif pour dessiner le branchage. Pas de virgules entre les x et y !
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 une boule puis je la clone N fois.