Dégradé linéaire SVG

Les gradients SVG doivent être définis à l'intérieur de la balise <defs>.

Gradient SVG

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

Dans SVG, il y a deux types principaux de gradients :

  • Gradation linéaire
  • Gradation radioactive

Gradation linéaire

La balise <linearGradient> peut être utilisée pour définir une gradation linéaire dans SVG.

La balise <linearGradient> doit être imbriquée à l'intérieur de <defs>. La balise <defs> est l'abréviation de definitions, qui peut définir des éléments spéciaux tels que les gradients.

La gradation linéaire peut être définie comme une gradation horizontale, verticale ou angulaire :

  • Lorsque y1 et y2 sont égaux, et que x1 et x2 sont différents, une gradation horizontale peut être créée
  • Lorsque x1 et x2 sont égaux, et que y1 et y2 sont différents, une gradation verticale peut être créée
  • Lorsque x1 et x2 sont différents, et que y1 et y2 sont différents, une gradation angulaire peut être créée

Copiez le code suivant dans un bloc-notes, puis enregistrez le fichier sous le nom "linear1.svg". Placez ce fichier dans votre répertoire web :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Explication du code :

  • L'attribut id de la balise <linearGradient> peut définir un nom unique pour la gradation
  • L'attribut fill:url(#orange_red) lie l'élément ellipse à cette gradation
  • Les attributs x1, x2, y1, y2 de la balise <linearGradient> définissent la position de début et de fin de la gradation
  • La gamme de couleurs de la gradation peut être composée de deux ou plusieurs couleurs. Chaque couleur est définie par une balise <stop>. L'attribut offset est utilisé pour définir la position de début et de fin de la gradation.

Voir l'exemple (gradation horizontale)

Un autre exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Voir l'exemple (dégradé vertical)