Dessiner avec SVG - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

Snap SVG : les dégradés

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.

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

 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

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