Dégradés radiaux SVG

Dégradé radial SVG - <radialGradient>

<radialGradient> L'élément est utilisé pour définir une dégradé radial (dégradé radiatif).

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

Exemple 1

Définir une ellipse avec une dégradé radial de blanc à bleu :

Ceci est le code SVG :

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </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 <radialGradient> définit le nom unique de la dégradé
• Les attributs cx, cy et r définissent le cercle le plus extérieur, fx et fy définissent le cercle le plus intérieur
• La gamme de couleur de la dégradé 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égradé de couleur
• L'attribut fill lie l'élément ellipse à la dégradé

Exemple 2

Définir une ellipse avec une dégradé radial de blanc à bleu :

Ceci est le code SVG :

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Essayez-le vous-même