Najlepszy samouczek SVG Gradient - normalny W 2024 r. W tym samouczku możesz dowiedzieć się
SVG Gradient,SVG gradienty liniowe - <lineargradient>,Przykład 1,Przykłady,Przykład 2,Przykłady,Przykład 3,Przykłady,
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:
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:
Przykłady
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
Spróbuj » 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:
Przykłady
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
Spróbuj » 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:
Przykłady
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
Spróbuj » 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