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