SVG Gradienții - liniar

SVG Gradienții

Un gradient este o tranziție lină de la o culoare la alta. In plus, mai multe tranziții de culoare pot fi aplicate aceluiași element.

Există două tipuri principale de gradienți în SVG:

• Liniar
• Radial

SVG Gradient liniar - <linearGradient>

<linearGradient> Elementul este folosit pentru a defini un gradient liniar.

<linearGradient> elementul trebuie imbricate într - un <defs> tag. <defs> tag - ul este prescurtarea de la definițiile și definirea unor elemente speciale (such as gradients) .

gradienții liniari pot fi definite ca gradienti orizontale, verticale sau unghiulare:

• gradienți orizontale sunt create atunci când y1 și y2 sunt egale și x1 și x2 diferă
• gradienți verticale sunt create atunci când x1 și x2 sunt egale și Y1 și Y2 diferă
• gradienți unghiulare sunt create atunci când x1 și x2 sunt diferite și Y1 și Y2 diferă

Exemplul 1

Definiți o elipsă cu un gradient liniar orizontal de la galben la roșu:

Aici este codul SVG:

Code explanation:

• id atribut al <linearGradient> tag - ul definește un nume unic pentru gradientul
• X1, x2, y1, y2 atribute ale <linearGradient> tag - ul defini poziția de start și sfârșitul gradientului
• Gama de culori pentru un gradient poate fi compus din două sau mai multe culori. Fiecare culoare este specificat cu un <stop> tag - ul. De offset atribut este folosit pentru a defini în cazul în care începe culoarea gradientului și sfârșitul
• fill atribut leagă elementul de elipsă cu gradientul

Exemplul 2

Definiți o elipsă cu un gradient liniar vertical de la galben la roșu:

Aici este codul SVG:

Exemplul 3

Definiți o elipsă cu un gradient liniar orizontal de la galben la roșu, și se adaugă un text în interiorul elipsei:

Aici este codul SVG:

Code explanation:

• <text> Elementul este folosit pentru a adăuga un text