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 : les dégradés

Sachez que vous pouvez aussi définir des dégradés linéaires et radiaux. Le codage est beaucoup moins verbeux qu'en SVG traditionnel 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. Instruction qui ne présente aucune difficulté ; donc je ne vous communique que le script.

Les dégradés linéaires

Exemple

Quatre rectangles remplis chacun avec un dégradé linéaire. De gauche à droite et de bas en haut :
• un dégradé trois couleurs avec un axe diagonal descendant
• un dégradé trois couleurs avec un axe vertical
• un dégradé quatre couleurs avec un axe horizontal ; le noir occupe 50% de la forme
• un dégradé quatre couleurs avec un axe diagonal montant ; le noir occupe 10% seulement de la forme

Le script

ViewBox de 600 par 600. 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});

Analysons la syntaxe relative à la définition d'un dégradé linéaire :
• lettre "l" comme dégradé linéaire
• entre parenthèses axe du dégradé sous forme de 2 couples de chiffres 0 et 1 ;
  0,0 = coin haut gauche ; 1,1 = coin bas droit ; 0,1 = coin bas gauche ; 1,0 = coin haut droit
• liste de couleurs séparées par un tiret ; répartition égale des couleurs sauf si un "stop" est précisé ce qui est le cas pour les deux derniers dégradés où vous retrouvez la syntaxe black:50-navy-blue-skyblue. Donc ici le noir occupe la moitié de la forme et les 3 autres couleurs se partagent l'autre moitié.

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 script

ViewBox de 600 par 600. 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});

Analysons la syntaxe :
• lettres "r" comme dégradé radial
• entre parenthèses : origine du dégradé ; ici le centre de la forme puisque les valeurs sont .5 et .5
• liste de couleurs séparées par un tiret ; répartition égale des couleurs sauf si un "stop" est précisé.