SVG Gradient-Radial

L'étiquette de <radialGradient> doit être nichée dans l'étiquette de <defs>. L'étiquette de <defs> est abréviation la définition et elle permet la définition des éléments spéciaux tels que des gradients.

Copy le code suivant dans le bloc-notes et économiser le dossier en tant que « radial.svg ». Placer le dossier dans votre annuaire de Web seulement :

<?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 de code :

L'attribut d'identification de l'étiquette de <radialGradient> définit un nom unique pour les gradients
La suffisance : la propriété d'URL (#grey_blue) lie l'élément d'ellipse aux gradients
Le fx et les fy définissent le cercle les plus secrets et attributs les cx, cy et de r définissent le cercle extérieur
La gamme de couleur pour le gradient peut se composer de deux couleurs ou plus. Chaque couleur est indiquée avec l'étiquette de <stop>. L'attribut excentré est employé pour définir où la couleur de gradients commencent et finissent

Regardons 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>