Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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 ?
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.
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});
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.
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é.
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});
Un motif ("pattern" en anglais) est un objet destiné à remplir à l'infini un autre objet.
Notez que les images ne sont pas collées !
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 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 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.
Vous voulez qu'une image apparaisse dans un ellipse ou un losange. Il faut définir une découpe et l'appliquer aux photos.
L'image apparait dans une ellipse.
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
Un masque permet de rendre des zones de l'image semi-transparentes.
L'image bénéficie d'une découpe mais aussi d'un masque !
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.