Gradiente Radial SVG

As gradientes SVG devem ser definidas dentro da tag <defs>.

Gradiente radial

A tag <radialGradient> é usada para definir gradientes radiais.

A tag <radialGradient> deve estar aninhada dentro da tag <defs>. A tag <defs> é a abreviação de definitions e permite definir elementos especiais como gradientes.

Copie o seguinte código para um bloco de notas, salve o arquivo como "radial1.svg". Coloque este arquivo na sua pasta de diretório 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>

Explicação do código:

O atributo id da tag <radialGradient> pode definir um nome único para o gradiente, a propriedade fill:url(#grey_blue) liga o elemento ellipse a este gradiente, os atributos cx, cy e r definem o círculo externo, enquanto os fx e fy definem o círculo interno A faixa de cores gradientes pode ser composta por duas ou mais cores. Cada cor é definida por um tag <stop>. A propriedade offset é usada para definir a posição de início e fim do gradiente.

Ver Exemplo

Outro exemplo:

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