SVG Gradient - normalny

SVG Gradient

Gradient to płynne przejście z jednego do innego koloru do koloru. Ponadto, przejście może być stosowany do wielu kolorów na tym samym elementem.

Istnieją dwa główne rodzaje SVG gradient:

• liniowy
• promieniowy

SVG gradienty liniowe - <lineargradient>

<Lineargradient> służy do definiowania gradient liniowy.

<Lineargradient> tag muszą być zagnieżdżona <defs> wnętrzu. <DEFS> jest skrótem, definicje, takie jak specjalne elementy, które mogą być zdefiniowane jak gradientem.

Gradient liniowy może być zdefiniowana jako poziome, pionowe i kąta gradient:

• Gdy Y1 i Y2 są równe, ale nie obydwa X1 i X2, tworzyć poziomą gradientu
• Gdy X1 i X2 równe, y1 i y2 nie są takie same, można utworzyć gradient pionowy
• Gdy X1 i X2 są różne i y1 i y2 nie są takie same, można tworzyć kąt gradientu

Przykład 1

Definiuje poziomy gradient liniowy od żółtego do czerwonego owalu:

Oto kod SVG:

Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).

Analiza kodu:

• Atrybut id <lineargradient> Znacznik może być unikalna nazwa definicji gradientu
• <Lineargradient> tag X1, X2, Y1, Y2 atrybut definiuje początek i koniec gradientu
• Gradient paleta kolorów przez dwa lub więcej kolorów. Każdy kolor przez <stop> tagu określić. Przesunięcie jest używany do określenia położenia początku i końca gradientu.
• Wypełnienie elementu nieruchomości podłączenia się do gradientu elipsy

Przykład 2

Określ pionowy gradient liniowy od żółtego do czerwonego owalu:

Oto kod SVG:

Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).

Przykład 3

Definicja elipsy, poziomy gradient liniowy od żółtego do czerwonego w tekście i dodać elipsę:

Oto kod SVG:

Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).

Analiza kodu:

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