SVG Gradient - Linéaire

SVG Gradient

Le gradient est une transition en douceur de l'une à une autre couleur à la couleur. En outre, la transition peut être appliqué à une pluralité de couleurs sur le même élément.

Il existe deux principaux types de SVG Gradient:

linéaire
radial

SVG gradients linéaires - <linearGradient>

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

<LinearGradient> balise doit être imbriquée dans <defs> intérieur. <Defs> est la définition de l'acronyme, tels que des éléments spéciaux qui peuvent être définis comme gradient.

gradient linéaire peut être défini comme horizontal, gradient vertical ou de l'angle:

Lorsque Y1 et Y2 sont égaux, mais pas les deux x1 et x2, créer un gradient horizontal
Lorsque x1 et x2 égaux, Y1 et Y2 ne sont pas les mêmes, vous pouvez créer un gradient vertical
Lorsque x1 et x2 sont différents et Y1 et Y2 ne sont pas les mêmes, vous pouvez créer un angle gradient

exemple 1

Il définit le gradient linéaire horizontal du jaune au rouge ovale:

Voici le code SVG:

Exemples

Essayez »

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).

Analyse de code:

attribut id <linearGradient> peut être un nom unique pour la définition de gradient
<LinearGradient> tag X1, X2, Y1, Y2 attribut définit le début et la fin du gradient
Gradient gamme de couleurs par deux ou plusieurs couleurs. Chaque couleur par une balise <STOP> pour spécifier. offset est utilisée pour définir la position de début et à la fin du gradient.
Remplissez élément de propriété pour créer un lien vers le gradient de l'ellipse