Gradienti SVG - Radiale
Gradiente radiale SVG - <Gradiente radiale>
L'elemento <radialGradient> viene utilizzato per definire un gradiente radiale.
L'elemento <radialGradient> deve essere annidato all'interno di un tag <defs>. Il tag <defs> è l'abbreviazione di definizioni e contiene la definizione di elementi speciali (come i gradienti).
Esempio 1
Definisci un'ellisse con un gradiente radiale dal bianco al blu:
Ecco il codice SVG:
Esempio
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
Spiegazione del codice:
- L'attributo id del tag <radialGradient> definisce un nome univoco per il gradiente
- Gli attributi cx, cy e r definiscono il cerchio più esterno e fx e fy definiscono il cerchio più interno
- La gamma di colori per una sfumatura può essere composta da due o più colori. Ogni colore è specificato con un tag <stop>. L'attributo offset viene utilizzato per definire dove inizia e finisce il colore del gradiente
- L'attributo riempimento collega l'elemento dell'ellisse al gradiente
Esempio 2
Definisci un'altra ellisse con un gradiente radiale dal bianco al blu:
Ecco il codice SVG:
Esempio
<svg height="150" width="500">
<defs>
<radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>