SVG Radial Gradient

kwarin SVG na iya yin kira <defs> taga

kwarin radiation

<radialGradient> yin kira kwarin radiation

<radialGradient> taga na iya yin ganin <defs> kuma <defs> taga shi ne kuma yin kira definitions, wanda ya bayyana yin kira kwarin kuma sauransu elementa

Kopiyi kodi dake na zuwa kafin kuma wutsa filin kafin kuma wutsa "radial1.svg". Wutsa filin na kafin kuma wutsa 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>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

tumaturari kodi:

<radialGradient> taga na iya gina sunan wajen <stop> kuma fill:url(#grey_blue) kuma yin ganin <ellipse> elementa. cx, cy kuma r kuma yin kira kwarin gaba, kuma fx kuma fy kuma yin kira kwarin dutsen kwarin dake kwarin zaiya za farin dake ko dake ko. Kwarin dake kwarin zaiya da <stop> taga kuma yin kira. Offset kuma yin kira tsa ga farin kuma fada.

View Example

wani hanyan:

<?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>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

View Example