Dessiner avec SVG - sommaire

Snap SVG : les dégradés

Sachez que vous pouvez aussi définir des dégradés linéaires et radiaux avec la libraire Snap SVG. Le codage est beaucoup moins verbeux qu'en SVG traditionnel et s'inspire de la syntaxe des dégradés en CSS 3.

Dans tous les exemples qui suivent le code HTML à la balise SVG avec les attributs viewBox, ID & width. Instruction qui ne présente aucune difficulté ; donc je ne vous communique que le script (sans les balises SCRIPT début et fin).

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

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

A partir du script le framework produit un code SVG standard qui est interprété par le navigateur.

Utilisez les outils de développement du navigateur pour visualiser ce code.

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