Dégradés SVG -Radial

En SVG, l'<radialGradient>L'élément <radialGradient> est utilisé pour créer des dégradés radiaux, qui peuvent se diffuser vers l'extérieur à partir d'un point central pour former un effet de dégradé, donnant aux graphiques de riches variations de couleurs telles que des formes circulaires et radiales.

Les dégradés radiaux peuvent être appliqués au remplissage ou au contour d'éléments graphiques SVG, leur ajoutant une impression de profondeur et des effets visuels.

Syntaxe de base

<radialGradient id="gradient_id" cx="cx" cy="cy" r="r" fx="fx" fy="fy">
  <stop offset="offset1" stop-color="color1" />
  <stop offset="offset2" stop-color="color2" />
  <!-- 更多的 <stop> 元素 -->
</radialGradient>

Description des paramètres :

  • idL'attribut définit un identifiant unique pour le dégradé radial, utilisé pour référencer le dégradé dans les images SVG.

  • cxetcyL'attribut définit la coordonnée du point central du dégradé.

  • rL'attribut définit le rayon du dégradé.

  • fxetfyL'attribut définit les coordonnées du point focal du dégradé (facultatif), utilisées pour contrôler la forme et la direction du dégradé.

  • <stop>L'élément est utilisé pour spécifier les couleurs et les positions des couleurs dans le dégradé.

Le code suivant définit un dégradé radial du rouge au bleu, puis l'applique à un cercle rempli, donnant au cercle un effet de remplissage dégradé.

Exemple

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Définir un dégradé radial -->
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </radialGradient>
 
  <!-- Appliquer un dégradé radial à un cercle -->
  <circle cx="100" cy="100" r="80" fill="url(#gradient)" />
</svg>

Exemple 1

Définir un dégradé radial du blanc au bleu pour une ellipse :

Voici le code SVG :

Exemple

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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 »

Cliquez pour voir :。

Explication du code :

  • L'attribut id de la balise <radialGradient> peut définir un nom unique pour le dégradé.
  • Les attributs CX, CY et r définissent le cercle le plus externe, et Fx et Fy définissent le cercle le plus interne.
  • La plage de couleurs du dégradé peut être composée de deux couleurs ou plus. Chaque couleur est spécifiée avec une balise <stop>. L'attribut offset est utilisé pour définir le début et la fin des couleurs du dégradé.
  • L'attribut fill relie l'élément ellipse à ce dégradé.

Exemple 2

Définissez une autre ellipse avec un dégradé radial du blanc au bleu :

Voici le code SVG :

Exemple

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" 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(#grad1)" />
</svg>

Essayez-le vous-même »

Cliquez pour voir :。

Notes

  • Un dégradé peut contenir plusieurs<stop>éléments, chacun<stop>L'élément représente une couleur et une position dans le dégradé.

  • cx、cyetrL'attribut détermine le centre et le rayon du dégradé, tandis quefxetfyl'attribut est utilisé pour contrôler le foyer du dégradé, permettant d'ajuster la forme et la direction du dégradé.

  • Les valeurs de coordonnées du dégradé peuvent utiliser des pourcentages ou des valeurs de longueur spécifiques ; les valeurs en pourcentage sont relatives à la taille de l'élément graphique.

  • Les dégradés radiaux peuvent être appliqués au remplissage ou au contour des éléments graphiques SVG.

En utilisant<radialGradient>l'élément, vous pouvez créer des effets de dégradé radial riches et colorés, ajoutant une sensation de profondeur et un attrait visuel aux éléments graphiques SVG.

Autres extensions