SVG Gradienty - normalny

SVG Gradienty

Gradient to płynne przejście od jednego koloru do drugiego. Ponadto, kilka przejść kolorów mogą być stosowane do tego samego elementu.

Istnieją dwa główne rodzaje gradientów w SVG:

• Liniowy
• Promieniowy

SVG Linear Gradient - <lineargradient>

<linearGradient> element jest używany do określenia gradient liniowy.

<linearGradient> element musi być zagnieżdżone w <defs> tag. <defs> tag to skrót definicji i zawiera definicję elementów specjalnych (such as gradients) .

gradient liniowy może być zdefiniowana jako nachylenia poziomych, pionowych i kątowych:

• gradienty poziome są tworzone, gdy y1 i y2 są równe i X1 i X2 różnią
• gradienty pionowe są tworzone, gdy X1 i X2 są równe i Y1 i Y2 różnią
• Kątowe gradienty są tworzone, gdy X1 i X2 są różne i różnią Y1 i Y2

Przykład 1

Definiowanie elipsę z poziomym liniowym gradientem od żółtego do czerwonego:

Oto kod SVG:

Code explanation:

• id atrybut <linearGradient> tag definiuje unikalną nazwę gradientu
• X1, x2, y1, y2 atrybuty <linearGradient> tagu określić pozycję początkową i końcową gradientu
• Gama kolorów dla gradient może składać się z dwóch lub więcej kolorów. Każdy kolor jest określony za pomocą <stop> tag. offset atrybut jest używany do określenia, gdzie kolor gradientu początek i koniec
• fill atrybut łączy element elipsy do gradientu

Przykład 2

Definiowanie elipsę z pionowym gradientem liniowym od żółtego do czerwonego:

Oto kod SVG:

Przykład 3

Definiowanie elipsę z poziomym liniowym gradientem od żółtego do czerwonego i dodać tekst wewnątrz elipsy:

Oto kod SVG:

Code explanation:

• <text> element jest używany do dodawania tekstu