Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

Une classe "ligne" pour colorier certains chemins.

Le script

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".

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

Une bannière avec Snap SVG

Le rendu

Le code correspondant

CSS & HTML

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.

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

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