Gradiente lineare SVG

I gradienti SVG devono essere definiti all'interno del tag <defs>.

Gradiente SVG

Un gradiente è una transizione fluida da un colore a un altro. Inoltre, è possibile applicare transizioni di colore multiple allo stesso elemento.

In SVG ci sono due tipi principali di gradienti:

  • Gradiente lineare
  • Gradiente radiante

Gradiente lineare

Il tag <linearGradient> può essere utilizzato per definire gradienti lineari in SVG.

Il tag <linearGradient> deve essere incluso all'interno del tag <defs>. Il tag <defs> è l'abbreviazione di definitions e può definire elementi speciali come i gradienti.

Il gradiente lineare può essere definito come un gradiente orizzontale, verticale o angolare:

  • Quando y1 e y2 sono uguali, mentre x1 e x2 sono diversi, è possibile creare un gradiente orizzontale
  • Quando x1 e x2 sono uguali, mentre y1 e y2 sono diversi, è possibile creare un gradiente verticale
  • Quando x1 e x2 sono diversi, e y1 e y2 sono diversi, è possibile creare un gradiente angolare

Copia il seguente codice in un editor di testo, quindi salva il file come "linear1.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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Spiegazione del codice:

  • L'attributo id del tag <linearGradient> può definire un nome unico per il gradiente
  • L'attributo fill:url(#orange_red) collega l'elemento ellipse a questo gradiente
  • Gli attributi x1, x2, y1, y2 del tag <linearGradient> possono definire la posizione di inizio e fine del gradiente
  • L'intervallo di colori del gradiente 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 del gradiente.

Vedere l'esempio (gradiente orizzontale)

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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Visualizza esempio (gradiente verticale)