SVG Gradiente - Linear

SVG Gradient

Il gradiente è una transizione graduale da uno all'altro colore a colore. Inoltre, la transizione può essere applicata ad una pluralità di colori sullo stesso elemento.

Ci sono due tipi principali di SVG gradiente:

lineare
radiale

SVG gradienti lineari - <linearGradient>

<LinearGradient> viene utilizzato per definire un gradiente lineare.

<LinearGradient> tag deve essere nidificato all'interno <defs> interni. <Defs> tag è la definizione acronimo, come elementi speciali che possono essere definiti come gradiente.

gradiente lineare può essere definito come gradiente orizzontale, verticale o l'angolo:

Quando y1 e y2 sono uguali, ma non entrambi x1 e x2, creare un gradiente orizzontale
Quando X1 e X2 uguali, Y1 e Y2 non sono gli stessi, è possibile creare un gradiente verticale
Quando X1 e X2 sono diverse e Y1 e Y2 non sono gli stessi, è possibile creare un angolo di pendenza

esempio 1

Esso definisce il gradiente lineare orizzontale dal giallo al rosso ovale:

Ecco il codice SVG:

Esempi

Prova »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).

analisi del codice:

attributo id <linearGradient> tag può essere un nome univoco per la definizione del gradiente
<LinearGradient> tag X1, X2, Y1, Y2 attributo definisce l'inizio e la fine del gradiente
gamma di colori di gradiente da due o più colori. Ogni colore da un tag <STOP> per specificare. viene utilizzato per definire la posizione di inizio e di fine della sfumatura offset.
Riempire elemento di proprietà di collegare al gradiente dell'ellisse