SVG Linéaire
Description des dégradés SVG
Un dégradé est une transition fluide d'une couleur à une autre. Il est possible d'appliquer plusieurs transitions de couleur sur un même élément.
Il existe deux principaux types de dégradés en SVG :
- linéaire
- radial
L'élément <linearGradient>
L'élément <linearGradient> spécifie les dégradés linéaires qui remplissent les éléments graphiques. Il doit être imbriqué à l'intérieur d'une balise <defs> qui contient la définition d'éléments particuliers, comme les dégradés.
Les dégradés linéaires peuvent être horizontaux, verticaux ou angulaires :
- Dégradés horizontaux - y1 et y2 sont égaux, et x1 et x2 diffèrent.
- Dégradés verticaux - x1 et x2 sont égaux, et y1 et y2 diffèrent.
- Dégradés angulaires - x1 et x2 varient, et y1 et y2 diffèrent également.
DANGER
Ne confondez jamais un dégradé linéaire SVG avec la propriété CSS radial-gradient. Les dégradés CSS s'appliquent aux éléments HTML, tandis que les dégradés SVG s'appliquent aux éléments SVG.
Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire horizontal :
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 :
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>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 le comportement du dégradé s'il commence ou se termine à l'intérieur des limites de la forme qui le contient. 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 tracé. |
| 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 tracé. |
| 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 tracé. |
| 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 tracé. |
L'élément SVG <linearGradient> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quelles sont les utilisations des attributs 'x1', 'y1', 'x2' et 'y2' dans un dégradé linéaire SVG en HTML ?