Linear Gradient sa SVG

SVG Gradient

Ang pagbabagong kulay ay isang magandang pagbabagong kulay mula sa isang kulay hanggang sa ibang kulay. Gayundin, maaaring gamitin ang ilang pagbabagong kulay sa isang elemento.

May dalawang pangunahing uri ng pagbabagong kulay sa SVG:

• Linear Gradient
• Radiant Gradient

SVG Linear Gradient - <linearGradient>

<linearGradient> Ang elemento ay ginagamit upang tinukoy ang gradwasyon ng patag.

<linearGradient> Ang elemento ay dapat nakakabit sa <defs> Sa loob ng marka.<defs> Ang elemento ay isang pangalit ng 'definition', na naglalaman ng paglilinaw ng mga espesyal na elemento (tulad ng filter).

Maaaring tinukoy ang gradwasyon ng patag bilang gradwasyon ng patag, patag o anggulo:

• Nilikha ang gradwasyon ng patag kapag magkakapareho ang y1 at y2 at magkakaiba ang x1 at x2
• Nilikha ang gradwasyon ng patag kapag magkakapareho ang x1 at x2 at magkakaiba ang y1 at y2
• Nilikha ang gradwasyon ng anggulo kapag magkakaiba ang x1 at x2 at magkakaiba ang y1 at y2

Halimbawa 1

Tinukoy ng isang elipso na may pagbabagong kulay mula sa dilaw hanggang sa pulang panig ng paglayo ng kulay:

Ito ang SVG code:

<svg height="150" width="400">
  <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>

Subukan Muna

Pagpaliwanag ng Code

• Ang attribute na id ng <linearGradient> tag ay nagtutukoy sa tunay na pangalan ng gradient
• Ang attribute na x1, x2, y1, y2 ng <linearGradient> tag ay nagtutukoy sa simula at katapusan ng gradient
• Ang hanay ng kulay ng gradient ay maaaring magkaroon ng dalawa o higit pang kulay. Bawat kulay ay tinukoy ng <stop> tag
• Ang attribute na offset ay ginagamit upang tanggapin ang simula at katapusan ng kulay ng gradient
• Ang attribute na fill ay magkakabit sa elipso sa gradient

Mga Halimbawa 2

Tinukoy ng SVG ang isang elipso, na mayroong vertical na linear gradient mula sa dilaw hanggang pulang:

Ito ang SVG code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Subukan Muna

Mga Halimbawa 3

Tinukoy ng SVG ang isang elipso, at magdagdag ng teksto sa loob ng elipso, na mayroong horizontal na linear gradient mula sa dilaw hanggang pulang:

Ito ang SVG code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Subukan Muna

Pagpaliwanag ng Code

• Ang <text> element ay ginagamit para magdagdag ng teksto