Linear Gradient ng SVG

Ang paglayo ng SVG ay dapat na nakadefine sa loob ng <defs> tag.

Paglayo ng SVG

Ang paglayo ay isang magandang pagbabagong kulay mula sa isang kulay hanggang sa ibang kulay. Gayundin, maaaring ilagay ang pagbabagong kulay ng maraming kulay sa isang elemento.

May dalawang pangunahing uri ng paglayo sa SVG:

  • Paglayo na haba
  • Paglayo na radiyado

Paglayo na haba

Ang <linearGradient> ay ginagamit upang tukuyin ang paglayo na haba ng SVG.

Ang <linearGradient> tag ay dapat na nakasakop sa loob ng <defs>. Ang <defs> tag ay isang pangalang maikling tag na ginagamit upang tumukoy sa mga espesyal na elemento tulad ng paglayo.

Ang paglayo na haba ay maaaring ayon sa horizontal, vertical, o malawak na paglayo:

  • Maaaring gumawa ng horizontal na paglayo kapag ang y1 at y2 ay pantay, at ang x1 at x2 ay magkakaiba
  • Maaaring gumawa ng patlang na paglayo kapag ang x1 at x2 ay pantay, at ang y1 at y2 ay magkakaiba
  • Maaaring gumawa ng malawakang paglayo kapag ang x1 at x2 ay magkakaiba, at ang y1 at y2 ay magkakaiba din

Kopyahin ang sumusunod na kode sa isang notepad, at i-save ang file bilang "linear1.svg". Ilagay ang file sa iyong web directory:

<?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>

Paliwanag ng Kode:

  • Ang id attribute ng <linearGradient> tag ay maaaring magbigay ng isang natatanging pangalan sa paglayo
  • Ang attribute na fill:url(#orange_red) ay nagkakabit sa ellipse element sa paglayo na ito
  • Ang x1, x2, y1, at y2 attribute ng <linearGradient> tag ay maaaring tukuyin ang simula at katapusan ng paglayo.
  • Ang pagbabagong kulay ay maaaring binubuo ng dalawa o higit pang kulay. Bawat kulay ay tinutukoy sa pamamagitan ng isang <stop> tag. Ang offset attribute ay ginagamit upang tukuyin ang simula at katapusan ng paglayo.

Tingnan ang halimbawa (paglayo ng kulay sa pagkakalat)

Isang halimbawa:

<?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>

Tingnan ang Halimbawa (Vertical Gradient)