Les zones de dessin restent vides car votre navigateur a bloqué le JavaScript

Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

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

Snap SVG : autres définitions

Dans le chapitre précédent j'ai évoqué les filtres.
Connaissant le SVG standard, vous savez que dans la partie DEFS on définit non seulement les filtres mais aussi les dégradés, les motifs, les découpes et les masques.
Comment générer via Snap SVG ces différentes définitions ?

Les dégradés linéaires

Le codage des dégradés via Snap est très compacte et s'inspire de la syntaxe des dégradés en CSS 3.

Exemple

Le code correspondant

Ce premier canevas (dans le document HTML) est identifié "zone1".
Le script :

 var s = Snap("#zone1") ;
// définition de 4 dégradés linéaires 
var lineairedd = s.gradient("l(0, 0, 1, 1) black-red-pink"); // axe  : diagonale descendante
var lineairev = s.gradient("l(0, 0, 0, 1) black-orange-yellow"); // axe vertical
var lineaireh = s.gradient("l(0, 0, 1, 0) black:50-navy-blue-skyblue"); // axe horizontal
var lineairedm = s.gradient("l(0, 1, 1, 0) black:10-olive-green-lime"); // axe : diagonale montante

// utilisation des dégradés
s.rect(0, 0, 200,300).attr({fill: lineairedd});
s.rect(300,0,200,300).attr({fill: lineairev});
s.rect(0,300,200,300).attr({fill: lineaireh});
s.rect(300,300,200,300).attr({fill: lineairedm});

Le code SVG généré par le framework

Utilisez les outils de développement du navigateur pour visualiser ce code SVG généré !
Ici Snap SVG nous a évité un encodage fastidieux.

Les dégradés radiaux

Exemple

Deux dégradés radiaux sont définis avec pour origine le centre de la forme.
Chaque dégradé radial appliqué à un cercle et à un carré.

Le code correspondant

Ce deuxième canevas (dans la page web) est identifié "zone2".
Le script :

	var s = Snap("#zone2") ;
	var radial1 = s.gradient("r(0.5, 0.5)purple-cyan-pink"); // dégradé radial trois couleurs
	var radial2 = s.gradient("r(0.5, 0.5)black-navy-blue-skyblue"); // dégradé radial quatre couleurs
	s.circle(150,150,150).attr({fill: radial1});
	s.circle(450,150,150).attr({fill: radial2});
	s.rect(0,300,300,300).attr({fill: radial1});
	s.rect(300,300,300,300).attr({fill: radial2});

Les motifs avec Snap SVG

Un motif ("pattern" en anglais) est un objet destiné à remplir à l'infini un autre objet.

Motif basé sur une image

Le canevas

Notez que les images ne sont pas collées !

Le code correspondant

Le canevas est identifié "zone3".
Le script :

var paper = Snap("#zone3");
paper.attr({viewBox: "0,0,300,300", width : "50%"}); 
var motif1 = paper.image("logo.png",0,0,50,50)
   .pattern(0,0,60,60);
paper.rect(0,0,300,300).attr({fill : motif1});

Notez qu'ici les valeurs des attributs viewBox & width" de l'élément SVG sont définis dans le script.
Donc l'instruction HTML se résume à : <svg id ="zone3" >

Comme il est d'usage dans la documentation Snap, le canevas courant est référencé par la variable "paper".

Dans "motif1" les images ne seront pas collées car elles font 50 par 50 mais sont répétées tous les 60px tant en largeur qu'en hauteur via la méthode "pattern".

Le motif est un ensemble de chemins

Le canevas

Le cercle et le carré sont remplis par un motif.
Celui-ci est un ensemble de trois lignes obliques vertes et orientées.
Notez que l'espacement entre chaque motif.

Le code correspondant

Le canevas identifié "zone4" avec un viewBox (0,0,400,500).
Le script :

var paper = Snap("#zone4") ;
var motif2 = paper.path("M 0,10 L 10,0 M 0,20 L 20,0 M 10,20 L 20,10")
.attr({fill: "none", stroke: "green",  strokeWidth: 5 }).pattern(0,0,24,24); 
paper.circle(200, 100, 100).attr({fill: motif2});
paper.rect(100,200, 200, 200).attr({fill :motif2});

Notez que la méthode path comprend trois fois le paramètre M ; donc il y a trois chemins et chaque chemin se résume à un segment.

Les découpes (ou détourages)

Vous voulez qu'une image apparaisse dans un ellipse ou un losange. Il faut définir une découpe et l'appliquer aux photos.

Une image détourée

L'image apparait dans une ellipse.

Le code correspondant

Le canevas est identifié "zone5".
Le script :

var paper = Snap("#zone5") ;
var decoupe = paper.ellipse(250,300,200,300).attr({fill : "none"}); 
// définition d'une découpe
paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({clipPath : decoupe});
// application à l'image insérée de la découpe

La forme de détourage est définie dans la variable "decoupe". Cette forme doit être transparente !

Instruction à étudier attentivement :

	paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({clipPath : decoupe});

Notez la commande clipPath

Les masques

Un masque permet de rendre des zones de l'image semi-transparentes.

Le canevas

L'image bénéficie d'une découpe mais aussi d'un masque !

Le code correspondant

Le canevas est identifié "zone6".
Le script :

var  paper= Snap("#zone6") ;
var rect1 = paper.rect(0,0,500,300).attr({fill: "white", fillOpacity : 0.4}); 
var rect2 = paper.rect(0,300,500,300).attr({fill: "white", fillOpacity : 0.2}); 
var masque = paper.group(rect1,rect2); 
// définition d'un masque comprenant deux parties avec des opacités différentes
var decoupe = paper.ellipse(250,300,200,300).attr({fill : "none"});
paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({mask : masque, clipPath : decoupe});
// application à l'image insérée du masque

Étudiez attentivement cette instruction :

	paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({mask : masque, clipPath : decoupe});

Notez la commande mask.