Gradiente liniowy SVG

Gradienty SVG muszą być zdefiniowane wewnątrz etykiety <defs>.

Gradienty SVG

Gradient to płynna przejście z jednego koloru do drugiego. Ponadto, można zastosować przejścia między wieloma kolorami do jednego elementu.

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

  • Liniowy gradient
  • Gradient promienisty

Liniowy gradient

Etykieta <linearGradient> służy do definiowania liniowych gradientów w SVG.

Etykieta <linearGradient> musi być umieszczona wewnątrz <defs>. <defs> to skrót od definitions, który może definiować specjalne elementy, takie jak gradienty.

Liniowy gradient może być zdefiniowany jako gradient poziomy, pionowy lub kątowny:

  • Gdy y1 i y2 są równe, a x1 i x2 są różne, można utworzyć gradient poziomy
  • Gdy x1 i x2 są równe, a y1 i y2 są różne, można utworzyć gradient pionowy
  • Gdy x1 i x2 są różne, a y1 i y2 są różne, można utworzyć gradient kątowny

Skopiuj poniższy kod do notatnika, następnie zapisz plik jako "linear1.svg". Umieść ten plik w swoim katalogu web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Wyjaśnienie kodu:

  • Atrybut id etykiety <linearGradient> może przypisać unikalną nazwę gradientowi
  • Atrybut fill:url(#orange_red) łączy element elipsa z tym gradientem
  • Atrybuty x1, x2, y1, y2 etykiety <linearGradient> określają początek i koniec gradientu
  • Zakres kolorów gradientu może być złożony z dwóch lub więcej kolorów. Każdy kolor jest określony za pomocą etykiety <stop>. Atrybut offset określa początek i koniec gradientu.

Zobacz przykład (poziomy gradient)

Inny przykład:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Zobacz przykład (gradient pionowy)