Gradiente radiante SVG

Le progressioni SVG devono essere definite all'interno del tag <defs>.

Progressione radiante

Il tag <radialGradient> viene utilizzato per definire la progressione radiante.

Il tag <radialGradient> deve essere incluso all'interno del tag <defs>. Il tag <defs> è l'abbreviazione di definitions e permette di definire elementi speciali come le progressioni.

Copia il seguente codice in un editor di testo e salvalo come "radial1.svg". Metti questo file nella tua directory 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>

Spiegazione del codice:

L'attributo id del tag <radialGradient> può assegnare un nome unico alla progressione, l'attributo fill:url(#grey_blue) collega l'elemento ellisse a questa progressione, mentre cx, cy e r definiscono il cerchio esterno, mentre fx e fy definiscono il cerchio interno L'intervallo di colori della progressione può essere composto da due o più colori. Ogni colore è definito da un tag <stop>. L'attributo offset viene utilizzato per definire la posizione di inizio e fine della progressione.

Visualizza esempio

Un altro esempio:

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

Visualizza esempio