Les dégradés avec Snap SVG

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 traditionnel et s'inspire de la syntaxe des dégradés en CSS3.

Les dégradés linéaires

Exemple

Le script

 var s = Snap("#zone") ;
// 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});

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});

Passons au chapitre suivant Snap SVG -suite
Retour menu