Radial Gradient ng SVG

SVG Radial Gradient - <radialGradient>

<radialGradient> Ang element ay ginagamit upang tukuyin ang radial gradient (radiant gradient).

<radialGradient> Ang element ay dapat na nakalulugmok sa <defs> Sa tag.<defs> Ang element na definition ay isang akronimo ng definition, na naglalaman ng mga paglilingkuran ng espesyal na element ( tulad ng filter).

Halimbawa 1

Tinukoy ang isang ellipso, na may radyal na gradient mula sa puti hanggang asul:

Ito ang SVG code:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Subukan Ngayon

Paliwanag ng Code:

• Ang attribute na id ng <radialGradient> tag ay nagtutukoy sa tunay na pangalan ng gradient
• Ang attribute na cx, cy at r ay nagtutukoy sa pinakamalalaking lupon, at fx at fy ay nagtutukoy sa pinakamaliit na lupon
• Ang kulay na saklaw ng gradient ay maaaring binuo ng dalawa o higit pang kulay. Bawat kulay ay tinukoy ng <stop> tag
• Ang attribute na offset ay ginagamit upang tukuyin ang simula at katapusan ng kulay ng gradient
• Ang attribute na fill ay nagkakonekta sa ellipso element sa gradient

Halimbawa 2

Tinukoy ang isa pang ellipso, na may radyal na gradient mula sa puti hanggang asul:

Ito ang SVG code:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Subukan Ngayon