Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site
Dans la page précédente nous avons vu que l'on pouvait créer rapidement des filtres SVG avec Snap.
Et bien sachez que vous pouvez aussi définir des dégradés linéaires et radiaux. Le codage est beaucoup moins verbeux qu'en SVG et s'inspire
de la syntaxe des dégradés en CSS3.
Dans tous les exemples qui suivent le code HTML se résume au conteneur SVG avec les attributs widht, height, viewBox & ID. Instruction qui ne présente aucune difficulté ; donc je ne vous communique que 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});
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é.
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});