SVG Dégradés - Linéaire

SVG Dégradés

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

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

• Linéaire
• Radial

SVG Linear Gradient - <linearGradient>

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

Le <linearGradient> élément doit être imbriqué dans un <defs> tag. Le <defs> tag est courte pour les définitions et contient la définition d'éléments spéciaux (such as gradients) les (such as gradients) .

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

• gradients horizontaux sont créés lorsque Y1 et Y2 sont égaux et x1 et x2 diffèrent
• gradients verticaux sont créés lorsque X1 et X2 sont identiques et Y1 et Y2 sont différents
• gradients angulaires sont créés lorsque x1 et x2 diffèrent et Y1 et Y2 diffèrent

Exemple 1

Définir une ellipse avec un gradient linéaire horizontal du jaune au rouge:

Voici le code SVG:

Code explanation:

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

exemple 2

Définir une ellipse avec un gradient linéaire vertical du jaune au rouge:

Voici le code SVG:

exemple 3

Définir une ellipse avec un gradient linéaire horizontal du jaune au rouge, et ajouter un texte à l'intérieur de l'ellipse:

Voici le code SVG:

Code explanation:

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