SVG linearGradient
Apprenez l'élément SVG linearGradient et ses enfants stop : offset, stop-color, x1/x2/y1/y2, gradientUnits et spreadMethod, avec des exemples.
Un dégradé linéaire est une transition fluide d'une couleur à une autre le long d'une ligne droite. En SVG, on le construit avec deux éléments qui fonctionnent ensemble : un <linearGradient> qui définit la direction et le système de coordonnées de la ligne, et un ou plusieurs enfants <stop> qui placent des couleurs le long de celle-ci. On pointe ensuite le fill (ou stroke) d'une forme vers le dégradé par son id, en utilisant fill="url(#myGradient)".
Cette page couvre l'élément <linearGradient>, ses enfants <stop>, les coordonnées x1/x2/y1/y2 qui orientent le dégradé, et les attributs gradientUnits et spreadMethod qui contrôlent comment il est appliqué et répété.
Description des dégradés SVG
Un dégradé est un mélange de couleurs lisse qui peut être réutilisé comme couleur de remplissage pour n'importe quel nombre de formes. SVG dispose de deux principaux types de dégradés :
- linéaire — les couleurs se mélangent le long d'une ligne droite (cette page).
- radial — les couleurs se mélangent vers l'extérieur depuis un point central. Voir SVG radialGradient.
L'élément <linearGradient>
L'élément <linearGradient> définit un dégradé linéaire qui remplit (ou borde) des éléments graphiques. C'est une définition, pas une forme visible, il réside donc dans un bloc <defs>, reçoit un id et est référencé depuis une forme avec fill="url(#id)".
La direction du dégradé est définie par le point de départ (x1, y1) et le point d'arrivée (x2, y2). La ligne de dégradé va du point de départ au point d'arrivée ; les couleurs sont interpolées le long de celle-ci.
Les dégradés linéaires peuvent être horizontaux, verticaux ou angulaires :
- Horizontal —
y1ety2sont égaux, tandis quex1etx2diffèrent. - Vertical —
x1etx2sont égaux, tandis quey1ety2diffèrent. - Angulaire (diagonal) — les deux paires x et y diffèrent.
Si vous omettez les coordonnées, les valeurs par défaut SVG sont x1="0%", y1="0%", x2="100%", y2="0%" — un dégradé horizontal de gauche à droite.
Ne confondez pas un dégradé linéaire SVG avec la fonction CSS linear-gradient. Les dégradés CSS peignent les éléments HTML via background-image, tandis que les dégradés SVG peignent les formes SVG via fill ou stroke.
L'élément <stop>
Chaque <stop> place une couleur unique à une position le long de la ligne de dégradé. Il faut au moins deux stops pour voir une transition. Les stops peuvent être stylisés avec des attributs de présentation (stop-color, stop-opacity) ou avec le CSS équivalent à l'intérieur d'un attribut style, comme dans les exemples ci-dessous.
| Attribut | Description |
|---|---|
offset | L'emplacement du stop le long de la ligne de dégradé, en tant que nombre 0–1 ou pourcentage 0%–100%. 0% est le point de départ, 100% est le point d'arrivée. |
stop-color | La couleur du stop. Accepte toute couleur CSS (nommée, #hex, rgb(), hsl()). Par défaut black. |
stop-opacity | L'opacité de la couleur du stop, de 0 (transparent) à 1 (opaque). Par défaut 1. |
Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire horizontal :
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
</svg>
</body>
</html>Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire vertical :
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
</svg>
</body>
</html>Exemple d'un dégradé linéaire angulaire (diagonal) :
Par défaut, gradientUnits vaut objectBoundingBox, donc les coordonnées sont des fractions du cadre de délimitation de la forme. Utiliser x1="0" y1="0" x2="1" y2="1" fait courir la ligne de dégradé du coin supérieur gauche au coin inférieur droit, produisant un mélange diagonal.
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="diagonal" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="20" y="20" width="260" height="160" fill="url(#diagonal)" />
</svg>
</body>
</html>L'attribut gradientUnits
gradientUnits décide comment x1, y1, x2 et y2 sont interprétés :
objectBoundingBox(par défaut) — les coordonnées sont relatives à la forme peinte, où0(ou0%) représente un bord et1(ou100%) le bord opposé. Le dégradé s'étire automatiquement pour s'adapter à chaque forme.userSpaceOnUse— les coordonnées sont des positions absolues dans le système de coordonnées utilisateur du SVG (les mêmes unités que les propresx/yde la forme).
Un piège courant : avec userSpaceOnUse, les coordonnées en pourcentage et 0–1 ne suivent plus la forme. Vous devez donner de vraies coordonnées (par ex. x1="20" y1="0" x2="280" y2="0") qui chevauchent la forme, sinon le remplissage peut apparaître plat (une couleur unique) parce que la ligne de dégradé ne la traverse jamais.
L'attribut spreadMethod
spreadMethod contrôle ce qui se passe en dehors du segment [x1,y1]–[x2,y2] lorsque la ligne de dégradé est plus courte que la forme. Il n'a un effet visible que lorsque le dégradé ne couvre pas déjà toute la forme.
| Valeur | Comportement |
|---|---|
pad (par défaut) | Les couleurs du premier et du dernier stop s'étendent (« remplissent ») pour couvrir la zone restante. |
reflect | Le dégradé se reflète en alternance, se répétant dans des directions alternées. |
repeat | Le dégradé se répète en carreaux, en sautant du dernier stop au premier et en recommençant. |
<!DOCTYPE html>
<html>
<body>
<svg height="120" width="300">
<defs>
<linearGradient id="repeated" x1="0" y1="0" x2="0.2" y2="0"
spreadMethod="repeat">
<stop offset="0%" stop-color="rgb(28, 135, 201)" />
<stop offset="100%" stop-color="rgb(128, 0, 128)" />
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="120" fill="url(#repeated)" />
</svg>
</body>
</html>Changez spreadMethod="repeat" en reflect ou pad dans l'exemple ci-dessus pour comparer les trois comportements : repeat produit des sauts de couleur brusques, reflect produit un ping-pong fluide, et pad affiche le dégradé une fois puis un bloc uni de la dernière couleur.
Attributs
| Valeur | Description |
|---|---|
| gradientUnits | Cet attribut spécifie le système de coordonnées pour les attributs x1, x2, y1, y2. Valeurs : userSpaceOnUse, objectBoundingBox. |
| gradientTransform | Cet attribut applique une transformation supplémentaire au système de coordonnées du dégradé. |
| href | Cet attribut spécifie une référence vers un autre élément <linearGradient>. |
| spreadMethod | Cet attribut spécifie comment le dégradé se comporte s'il commence ou se termine à l'intérieur des limites de la forme qui contient le dégradé. Valeurs : pad, repeat, reflect. |
| x1 | Cet attribut spécifie la coordonnée x du point de départ du vecteur de dégradé le long duquel le dégradé linéaire est dessiné. |
| x2 | Cet attribut spécifie la coordonnée x du point d'arrivée du vecteur de dégradé le long duquel le dégradé linéaire est dessiné. |
| y1 | Cet attribut spécifie la coordonnée y du point de départ du vecteur de dégradé le long duquel le dégradé linéaire est dessiné. |
| y2 | Cet attribut spécifie la coordonnée y du point d'arrivée du vecteur de dégradé le long duquel le dégradé linéaire est dessiné. |
L'élément SVG <linearGradient> prend également en charge les Attributs globaux et les Attributs d'événement.
Pour les mélanges de couleurs radiaux qui se propagent vers l'extérieur depuis un point central plutôt que le long d'une ligne, voir SVG radialGradient.