Gradienti SVG - Lineare

Gradienti SVG

Una sfumatura è una transizione graduale da un colore all'altro. Inoltre, allo stesso elemento possono essere applicate più transizioni di colore.

Esistono due tipi principali di gradienti in SVG:

• Lineare
• Radiale

Gradiente lineare SVG - <gradiente lineare>

L'elemento <linearGradient> viene utilizzato per definire un gradiente lineare.

L'elemento <linearGradient> 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).

I gradienti lineari possono essere definiti come gradienti orizzontali, verticali o angolari:

• I gradienti orizzontali vengono creati quando y1 e y2 sono uguali e x1 e x2 differiscono
• I gradienti verticali vengono creati quando x1 e x2 sono uguali e y1 e y2 differiscono
• I gradienti angolari vengono creati quando x1 e x2 differiscono e y1 e y2 differiscono

Esempio 1

Definisci un'ellisse con un gradiente lineare orizzontale dal giallo al rosso:

Ecco il codice SVG:

Spiegazione del codice:

• L'attributo id del tag <linearGradient> definisce un nome univoco per il gradiente
• Gli attributi x1, x2, y1,y2 del tag <linearGradient> definiscono la posizione iniziale e finale del gradiente
• 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'ellisse con un gradiente lineare verticale dal giallo al rosso:

Ecco il codice SVG:

Esempio 3

Definisci un'ellisse con un gradiente lineare orizzontale dal giallo al rosso e aggiungi un testo all'interno dell'ellisse:

Ecco il codice SVG:

Spiegazione del codice:

• L'elemento <text> viene utilizzato per aggiungere un testo