Dégradés SVG - Linéaire

Dégradés SVG

Un dégradé est une transition en douceur d'une couleur à une autre. De plus, plusieurs transitions de couleurs peuvent être appliquées à un même élément.

Il existe deux principaux types de dégradés en SVG :

• Linéaire
• Radial

Dégradé linéaire SVG - <linearGradient>

L'élément <linearGradient> est utilisé pour définir un dégradé linéaire.

L'élément <linearGradient> doit être imbriqué dans une balise <defs>. La balise <defs> est l'abréviation de définitions et contient la définition d'éléments spéciaux (tels que les dégradés).

Les dégradés linéaires peuvent être définis comme des dégradés horizontaux, verticaux ou angulaires :

• Des dégradés horizontaux sont créés lorsque y1 et y2 sont égaux et x1 et x2 diffèrent
• Des dégradés verticaux sont créés lorsque x1 et x2 sont égaux et que y1 et y2 diffèrent
• Des dégradés angulaires sont créés lorsque x1 et x2 diffèrent et que y1 et y2 diffèrent

Exemple 1

Définissez une ellipse avec un dégradé linéaire horizontal du jaune au rouge :

Voici le code SVG :

Explication du code :

• L'attribut id de la balise <linearGradient> définit un nom unique pour le dégradé
• Les attributs x1, x2, y1,y2 de la balise <linearGradient> définissent la position de début et de fin du dégradé
• La gamme de couleurs d'un dégradé peut être composée de deux couleurs ou plus. Chaque couleur est spécifiée avec une balise <stop>. L'attribut offset est utilisé pour définir où la couleur du dégradé commence et se termine
• L'attribut fill relie l'élément ellipse au dégradé

Exemple 2

Définissez une ellipse avec un dégradé linéaire vertical du jaune au rouge :

Voici le code SVG :

Exemple 3

Définissez une ellipse avec un dégradé linéaire horizontal du jaune au rouge et ajoutez un texte à l'intérieur de l'ellipse :

Voici le code SVG :

Explication du code :

• L'élément <text> est utilisé pour ajouter un texte