Gradienty SVG — liniowe

Gradienty SVG

Gradient to płynne przejście od jednego koloru do drugiego. Ponadto do tego samego elementu można zastosować kilka przejść kolorystycznych.

W SVG istnieją dwa główne typy gradientów:

• Liniowy
• Promieniowy

Gradient liniowy SVG — <linearGradient>

Element <linearGradient> służy do definiowania gradientu liniowego.

Element <linearGradient> musi być zagnieżdżony w znaczniku <defs>. Znacznik <defs> jest skrótem od definicji i zawiera definicję elementów specjalnych (takich jak gradienty).

Gradienty liniowe można zdefiniować jako gradienty poziome, pionowe lub kątowe:

• Gradienty poziome są tworzone, gdy y1 i y2 są równe, a x1 i x2 się różnią
• Gradienty pionowe są tworzone, gdy x1 i x2 są równe, a y1 i y2 się różnią
• Gradienty kątowe są tworzone, gdy x1 i x2 różnią się, a y1 i y2 się różnią

Przykład 1

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

Oto kod SVG:

Wyjaśnienie kodu:

• Atrybut id znacznika <linearGradient> definiuje unikalną nazwę gradientu
• Atrybuty x1, x2, y1,y2 znacznika <linearGradient> definiują pozycję początkową i końcową gradientu
• Zakres kolorów gradientu może składać się z dwóch lub więcej kolorów. Każdy kolor jest określony znacznikiem <stop>. Atrybut offset służy do określenia, gdzie zaczyna się i kończy kolor gradientu
• Atrybut fill łączy element elipsy z gradientem

Przykład 2

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

Oto kod SVG:

Przykład 3

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

Oto kod SVG:

Wyjaśnienie kodu:

• Element <text> służy do dodawania tekstu