Dégradé radial SVG
Description de l'élément <radialGradient>
L'élément <radialGradient> spécifie un dégradé radial SVG qui peut être appliqué au remplissage et au contour des éléments graphiques.
L'élément <radialGradient> doit être imbriqué dans un élément <defs>, qui signifie définitions. L'élément <defs> contient les définitions d'éléments spécifiques (par exemple, des dégradés).
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> :
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>Attributs
| Attribut | Description |
|---|---|
| cx | Spécifie la coordonnée x du cercle final du dégradé. |
| cy | Spécifie la coordonnée y du cercle final du dégradé. |
| r | Spécifie le rayon du cercle final du dégradé. |
| fx | Spécifie la coordonnée x du cercle initial du dégradé. |
| fy | Spécifie la coordonnée y du cercle initial 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 | 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 contenant le dégradé. Valeurs : pad, repeat ou reflect. |
L'élément SVG <radialGradient> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quels sont les attributs de l'élément 'radialGradient' en SVG ?