Accueil

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

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

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