Gradiente radial SVG

Las degradaciones SVG deben definirse dentro de la etiqueta <defs>.

Degradado radiante

La etiqueta <radialGradient> se utiliza para definir degradados radiantes.

La etiqueta <radialGradient> debe estar anidada dentro de <defs>. La etiqueta <defs> es una abreviatura de definitions y permite definir elementos especiales como degradados.

Copie el siguiente código en un bloc de notas y guárdelo como "radial1.svg". Coloque este archivo en su directorio 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>

Explicación del código:

La propiedad id del etiqueta <radialGradient> puede definir un nombre único para el degradado, fill:url(#grey_blue) enlaza el elemento ellipse a este degradado, cx, cy y r definen el círculo exterior, mientras que fx y fy definen el círculo interior El rango de colores degradados puede estar compuesto por dos o más colores. Cada color se especifica mediante una etiqueta <stop>. La propiedad offset se utiliza para definir la posición de inicio y final del degradado.

Ver ejemplo

Otro ejemplo:

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

Ver ejemplo