SVG Sfumature - Linear

SVG gradienti

Un gradiente è un passaggio graduale da un colore all'altro. Inoltre, diverse transizioni di colore possono essere applicati allo stesso elemento.

Ci sono due tipi principali di gradienti in SVG:

• Lineare
• Radiale

SVG Sfumatura lineare - <linearGradient>

Il <linearGradient> elemento viene utilizzato per definire una sfumatura lineare.

Il <linearGradient> elemento deve essere nidificato all'interno di un <defs> tag. Il <defs> tag è l'abbreviazione di definizioni e contiene la definizione di elementi speciali (such as gradients) .

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

• gradienti orizzontali vengono creati quando Y1 e Y2 sono uguali e x1 e x2 differiscono
• gradienti verticali vengono creati quando X1 e X2 sono uguali e Y1 e Y2 differiscono
• gradienti angolari vengono creati quando X1 e X2 differiscono e Y1 e Y2 differiscono

esempio 1

Definire un ellisse con un gradiente lineare orizzontale dal giallo al rosso:

Ecco il codice SVG:

Code explanation:

• L' id attributo del <linearGradient> tag definisce un nome univoco per il gradiente
• Il x1, x2, y1, y2 attributi del <linearGradient> tag definire la posizione di inizio e di fine della sfumatura
• La gamma di colori per un gradiente può essere composta da due o più colori. Ogni colore è specificato con un <stop> tag. L' offset attributo viene utilizzato per definire dove il colore gradiente di inizio e fine
• Il fill di attributo collega l'elemento ellisse al gradiente

esempio 2

Definire un ellisse con un gradiente lineare verticale dal giallo al rosso:

Ecco il codice SVG:

esempio 3

Definire un ellisse con un gradiente lineare orizzontale dal giallo al rosso, e aggiungere un testo all'interno dell'ellisse:

Ecco il codice SVG:

Code explanation:

• Il <text> elemento viene utilizzato per aggiungere un testo