Les dégradés, comme les motifs, servent à remplir une forme ou son liseré. On l’utilisera donc comme avec les motifs. Il existe deux sortes de dégradés : les dégradés linéaires et les dégradés radiaux.
Mais avant tout, que ce soit pour les dégradés linéaires ou radiaux, il faut indiquer les couleurs que l’on veut utiliser. Un seul élément est nécessaire : stop.
Comme un dégradé demande un minimum de deux couleurs, on utilisera plusieurs stop, qui porteront tous l’attribut offset. Celui-ci indiquera en pourcentage sa distance (et donc la distance de la couleur stop) entre le point de départ du dégradé et sa fin (nous verrons ça plus tard). Dans l’exemple suivant, le dégradé passera par une couleur centrale :
Ne vous amusez pas à passer de 50% à 20%, votre dessin SVG aura des comportements bizarres. ;)
Vous avez remarqué que j’ai pris le soin de rajouter des id aux stop : ceux ci vont nous servir pour utiliser les deux propriétés CSS qui permettent de contrôler la couleur : stop-color et stop-opacity. Vous avez tout de suite compris le mode d’utilisation : on spécifie dans stop-color la couleur du stop correspondant, et dans stop-opacity son opacité, valeur allant de 0 à 1 (inclus, 1 étant la valeur par défaut). En reprennant notre exemple, on peut écrire :
C’est simple, mais un peu lourd. On peut dans ce cas utiliser l’attribut style.
On déclare un dégradé linéaire grâce à l’élément linearGradient, dans lequel on inclu des stop.
Comme tous les objets réutilisables, linearGradient doit évidemment se trouver dans defs.
Ensuite, on doit spécifier la direction, grâce à 4 attributs : x1, y1, x2 et y2. La direction du dégradé sera celle du vecteur partant de x1,y1 et allant à x2,y2. Mais comme pour les motifs, le système de coordonnées peut être choisi !
Cette valeur est la valeur par défaut. On se trouve alors non pas dans le système de coordonnées du svg parent mais dans la plus petite boîte rectangle qui englobe la forme sur laquelle vous appliquez le dégradé. Les valeurs prises par les attributs listés ci-dessus sont donc à écrire en pourcentage.
Dans ce cas, le système de coordonnées utilisé est le système de coordonnée courant, c’est à le svg parent. Cela concerne les attributs x1, y1, x2 et y2. Faisons traverser notre vecteur du haut droit au bas gauche, en dessinant ça et là différentes formes :
Il existe un second type de dégradé : le dégradé radial qui ne suit pas un vecteur mais un cercle (ou plutôt une ellipse).
On utilise alors l’élément radialGradient qui prend comme enfants, et comme pour linearGradient, plusieurs éléments stop.
Il faut en plus de cela indiquer le centre (attributs cx et cy), ainsi que le rayon (attribut r).
Et comme pour les dégradés linéaires, ces valeurs peuvent être spécifié de deux manières…
Dans ce cas et comme pour les dégradés linéaires, on se place dans la plus petite boîte rectangle qui contient la forme sur laquelle on déisre appliquer le dégradé. Les valeurs des attributs cx, cy et r sont par défaut de 50%, ce qui nous place au milieu de la boîte, avec un rayon touchant le bord. Les valeurs sont donc exprimées en pourcentages. Bien entendu si cette boîte englobante n’est pas un carré, le dégradé est tracé selon une ellipse et non plus selon un cercle.
C’est le dégradé radial le plus couramment utilisé.
Et encore une fois, comme pour les dégradés linéaires, l’utilisation de l’attribut gradientUnits fixé à userSpaceOnUse provoquera l’utilisation du système de coordonnées courant (le svg parent le plus proche) comme système de coordonnées. Et donc on n’utilise plus forcément les pourcentages, mais une unité permise dans ce système de coorodnnées. Et comme le plus souvent, ce sont des pixels, on utilise généralement cette unité.
Pour les dégradés linéaires, il est facile de savoir à quoi correspondent les pourcentages des offset : 0% correspond au début du vecteur (de coordonnées x1,y1) et 100% à la fin (x2,y2). Pour les dégradés radiaux, jusque là, c’était aussi simple : 0% correspondait au centre défini par les attributs cx et cy, tandis que 100% était atteint à la limite du cercle de rayon r. Mais les choses vont se compliquer, grâce, ou à cause, des foyers !
Le foyer va nous servir pour spécifier un autre point de départ pour le dégradé, donc la couleur à offset="0%". Les coordonnées du cercle ne serviront plus qu’à déterminer sa taille et donc la limite offset="110%" (grâce au rayon).
Pour spécifier le foyer, on utilise les attributs fx et fy sur radialGradient :
On peut même animer ces attributs :
On a vu à quoi correspondent les valeurs des offset, que ce soit pour les dégradés radiaux ou pour les dégradés linéaires.
Seulement, avec l’esprit un peu tordu, on pourrait se demander ce qui se passe lorsque les valeurs du vecteur pour les dégradés linéaires et du cercle pour les dégradés radiaux ne prennent pas l’intégralité de la boîte.
Pour contrôler ce comportement, on utilise l’attribut spreadMethod, ce qui traduit donne : « méthode d’étalage » !
La première valeur possible (il y en a trois) est pad. C’est la valeur par défaut, et elle a la propriété de dessiner uniformément de la même couleur avant le dégradé (en prenant la couleur du premier stop), idem après le dégradé (mais en prenant cette fois-ci la couleur du dernier stop). Le comportement est bien sûr le même pour les deux types de dégradés.
La seconde valeur est repeat et n’est pas très esthétique. Elle a pour effet de répéter le dégradé, simplement.
La troisième et dernière valeur, plus intéressante, est reflect : le dégradé est réfléchi, c’est à dire qu’une fois arrivé à la fin, il repart vers le début, puis repart vers la fin, etc etc jusqu’à ce que la limite du dégradé soit atteinte.
Oui, ça commence à devenir long !
Comme pour les motifs, on peut effectuer une ou plusieurs transformations sur un dégradé (linéaire ou radial) grâce à l’attribut gradientTransform. Essayons d’incliner un dégradé horizontal, cette fois-ci en utilisant stroke :
Ce passinant chapître est enfin terminé, et vu le temps qu’il faut pour écrire un tel cours je m’offre de petites vacances à partir de maintenant !
Le prochain chapitre traite du clipping et du masquage, qui consiste en… hmmm… bon rendez-vous au prochain chapitre. ^^
Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.
Ce tutoriel SVG (texte et images
d'exemple) de Tangui Le Pense est
mis à disposition selon les termes de la licence Creative Commons
Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur
une oeuvre à svground.fr.