Dégradé radial SVG

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

Dégradé radiatif

La balise <radialGradient> est utilisée pour définir un dégradé radiatif.

La balise <radialGradient> doit être imbriquée dans la balise <defs>. La balise <defs> est l'abréviation de definitions et permet de définir des éléments spéciaux tels que les dégradés.

Copiez le code suivant dans un bloc-notes, puis enregistrez le fichier sous le nom "radial1.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>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Explication du code :

L'attribut id de la balise <radialGradient> peut attribuer un nom unique au dégradé, fill:url(#grey_blue) relie l'élément ellipse à ce dégradé, cx, cy et r définissent le cercle extérieur, tandis que fx et fy définissent le cercle intérieur La gamme de couleurs du dégradé 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 du dégradé.

Voir l'exemple

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>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Voir l'exemple