Dégradés linéaires SVG

Dégradé SVG

Le 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 y a deux types principaux de dégradés dans SVG :

• Dégradé linéaire
• Dégradé radiale

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

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

<linearGradient> L'élément doit être imbriqué dans <defs> à l'intérieur des balises.<defs> L'élément est une abréviation de 'definitions', qui contient des définitions d'éléments spéciaux (comme les filtres).

La dégradé linéaire peut être définie comme une dégradé horizontal, vertical ou angulaire :

• Créer une dégradé horizontal lorsque y1 et y2 sont égaux et que x1 et x2 ne sont pas égaux
• Créer une dégradé vertical lorsque x1 et x2 sont égaux et que y1 et y2 ne sont pas égaux
• Créer une dégradé angulaire lorsque x1 et x2 sont différents et que y1 et y2 ne sont pas égaux

Exemple 1

Définir une ellipse avec une dégradé horizontal du jaune au rouge :

Voici le code SVG :

<svg height="150" width="400">
  <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>

Essayez-le vous-même

Explication du code :

• L'attribut id du tag <linearGradient> définit le nom unique de la dégradation
• Les attributs x1, x2, y1, y2 du tag <linearGradient> définissent le début et la fin de la dégradation
• La gamme de couleurs de la dégradation peut être composée de deux ou plusieurs couleurs. Chaque couleur est spécifiée par un marqueur <stop>
• L'attribut offset définit le début et la fin de la dégradation de couleur
• L'attribut fill lie l'élément ellipse à la dégradation

Exemple 2

Définit une ellipse avec une dégradation verticale de couleur jaune à rouge :

Voici le code SVG :

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" 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(#grad2)" />
</svg>

Essayez-le vous-même

Exemple 3

Définit une ellipse et ajoute du texte à l'intérieur de l'ellipse, avec une dégradation horizontale de couleur jaune à rouge :

Voici le code SVG :

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Essayez-le vous-même

Explication du code :

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