Dégradé radial SVG (radialGradient) - Apprendre le HTML

Description de l'élément `<radialGradient>`

Un dégradé radial effectue une transition de couleurs vers l'extérieur depuis un point central selon un motif circulaire, à l'image des ondes se propageant autour d'un caillou jeté dans l'eau. L'élément <radialGradient> définit un tel dégradé, qui peut être appliqué au remplissage et au contour des éléments graphiques.

Cette page explique ce qui distingue un dégradé radial d'un dégradé linéaire, comment définir les points d'arrêt de couleur, et comment les attributs gradientUnits et spreadMethod contrôlent le résultat. Si vous débutez avec SVG, commencez par l'introduction à SVG.

L'élément <radialGradient> doit être imbriqué dans un élément <defs>, qui signifie définitions. L'élément <defs> contient des définitions réutilisables (comme les dégradés) qui ne sont pas dessinées directement — elles sont référencées par d'autres éléments. Pour appliquer le dégradé, donnez un id au <radialGradient>, puis référencez-le avec fill="url(#id)" (ou stroke="url(#id)").

Comment un dégradé radial est défini

C'est ce qui distingue les dégradés radiaux des dégradés linéaires. Un dégradé radial est défini par deux cercles :

Un cercle de fin, défini par cx, cy (son centre) et r (son rayon). Le dégradé se termine — atteint son dernier point d'arrêt de couleur — au bord de ce cercle.
Un point focal, défini par fx, fy. C'est là où le dégradé commence (son premier point d'arrêt de couleur). Le dégradé rayonne vers l'extérieur depuis le point focal jusqu'au cercle de fin.

Lorsque fx/fy correspondent à cx/cy, le dégradé est parfaitement concentrique. Lorsque vous déplacez le point focal loin du centre, le dégradé paraît décentré — utile pour simuler une source lumineuse ou le reflet sur une sphère 3D. Si vous omettez fx/fy, leurs valeurs correspondent par défaut à celles de cx/cy.

Points d'arrêt de couleur

Les couleurs d'un dégradé sont décrites par un ou plusieurs éléments <stop> imbriqués dans le <radialGradient>. Chaque point d'arrêt possède ces attributs :

offset — la position du point d'arrêt le long du dégradé, de 0% (le point focal) à 100% (le bord du cercle de fin). Vous pouvez aussi utiliser un nombre de 0 à 1.
stop-color — la couleur à cet offset (toute valeur de couleur CSS).
stop-opacity — l'opacité à cet offset, de 0 (transparent) à 1 (opaque).

Danger

Ne confondez pas un dégradé radial SVG avec la fonction CSS radial-gradient. Les dégradés CSS peuvent être appliqués à l'arrière-plan de n'importe quel élément, tandis que les dégradés SVG ne s'appliquent qu'aux éléments SVG.

Exemple de l'élément SVG `<radialGradient>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <!-- Center: transparent -->
          <stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
          <!-- Edge: solid light green -->
          <stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Essayez vous-même »

Exemple avec un point focal décentré

Déplacer fx/fy loin de cx/cy modifie le point de départ du dégradé. Ici, le point focal est décalé vers le coin supérieur gauche du cercle, ce qui donne à la forme l'apparence d'une sphère éclairée — le reflet se situe près du point focal et la couleur s'approfondit vers le cercle de fin :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <!-- End circle centered at 50%/50%; focal point shifted to 35%/35% -->
        <radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
          <stop offset="0%" stop-color="rgb(255, 255, 255)" />
          <stop offset="100%" stop-color="rgb(30, 80, 200)" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#sphere)" />
    </svg>
  </body>
</html>

Contrôler les unités avec `gradientUnits`

L'attribut gradientUnits détermine le système de coordonnées dans lequel cx, cy, r, fx et fy sont mesurés :

objectBoundingBox (valeur par défaut) — les coordonnées sont relatives à la boîte englobante de l'élément rempli. Utilisez des pourcentages ou des fractions (0 à 1), où 50% correspond au centre de la forme. Le dégradé s'adapte automatiquement à la forme.
userSpaceOnUse — les coordonnées utilisent le système de coordonnées utilisateur du canevas SVG (les mêmes unités que les formes). Utilisez des valeurs absolues comme cx="200". C'est pratique quand un même dégradé doit être partagé par plusieurs formes à position fixe.

<svg width="400" height="300">
  <defs>
    <radialGradient id="abs" gradientUnits="userSpaceOnUse"
                    cx="200" cy="150" r="120" fx="200" fy="150">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </radialGradient>
  </defs>
  <rect x="80" y="30" width="240" height="240" fill="url(#abs)" />
</svg>

Contrôler les bords avec `spreadMethod`

spreadMethod définit ce qui se passe au-delà du cercle de fin lorsque le dégradé ne couvre pas toute la forme (par exemple, quand r est plus petit que la forme, ou que le point focal est décalé) :

pad (valeur par défaut) — le dernier point d'arrêt de couleur continue en remplissage uni jusqu'aux bords.
reflect — le dégradé est mis en miroir et se répète vers l'extérieur comme ...bord → centre → bord → centre...
repeat — le dégradé repart depuis le début à chaque fois, se répétant vers l'extérieur comme ...centre → bord, centre → bord...

<svg width="400" height="150">
  <defs>
    <radialGradient id="rings" cx="50%" cy="50%" r="20%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#rings)" />
</svg>

Attributs

Attribut	Description
cx	Spécifie la coordonnée x du cercle de fin du dégradé.
cy	Spécifie la coordonnée y du cercle de fin du dégradé.
r	Spécifie le rayon du cercle de fin du dégradé.
fx	Spécifie la coordonnée x du cercle de départ du dégradé.
fy	Spécifie la coordonnée y du cercle de départ du dégradé.
gradientUnits	Spécifie le système de coordonnées pour `cx`, `cy`, `r`, `fx` et `fy`. Valeurs : `objectBoundingBox` (par défaut) ou `userSpaceOnUse`.
gradientTransform	Applique une transformation supplémentaire au système de coordonnées du dégradé.
href	Une référence URL vers un autre élément « radialGradient » ou « linearGradient ».
spreadMethod	Spécifie le comportement du dégradé lorsqu'il commence ou se termine à l'intérieur des limites des objets le contenant. Valeurs : `pad`, `repeat` ou `reflect`.

L'élément SVG <radialGradient> prend également en charge les Attributs globaux et les Attributs d'événement.

Chapitres associés

Dégradé linéaire SVG — l'autre type de dégradé, défini par une direction plutôt que par deux cercles.
Introduction à SVG — les bases de l'utilisation de SVG en HTML.
Référence SVG — une liste complète des éléments et attributs SVG.

Pratique

Quels attributs définissent le point focal (départ) d'un dégradé radial SVG ?

fx, fycx, cyx1, y1dx, dy

Description de l'élément <radialGradient>