Dégradé 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 au même élément.

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

Linéaire
Radial

Dégradé linéaire SVG - L'élément <linearGradient>

<linearGradient> est utilisé pour définir un dégradé linéaire. Les balises

<linearGradient> doivent être imbriquées dans <defs>. La balise <defs> est l'abréviation de définitions, qui peuvent définir des éléments spéciaux tels que des 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 peuvent être créés lorsque y1 et y2 sont égaux, mais x1 et x2 sont différents
Lorsque x1 et x2 sont égaux, mais que y1 et y2 sont différents, vous pouvez créer un dégradé vertical
Lorsque x1 et x2 sont différents, et y1 et y2 sont différents, vous pouvez créer un dégradé angulaire

Exemple 1

Définir un dégradé linéaire horizontal elliptique du jaune au rouge :

Ce qui suit est le code SVG :

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter l'instance " bouton pour afficher l'instance en ligne

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

Analyse du code :

<linearGradient> L'attribut id de la balise peut définir un nom unique pour le dégradé
<linearGradient>Le X1, Chaque couleur est spécifiée par une balise <stop> La propriété offset est utilisée pour définir les positions de début et de fin du dégradé.
L'attribut fill relie l'élément ellipse à ce dégradé
Exemple 2

Définir un dégradé linéaire vertical de l'ovale jaune à rouge :

Voici le code SVG :

Exemple

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

Exemple d'exécution»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : affichez le fichier SVG (cliquez avec le bouton droit sur la source d'aperçu graphique SVG).

Exemple 3

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

Voici le code SVG :

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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

Analyse du code :