SVG 放射性渐变

Ang pagbabagong kulay ng SVG ay dapat na tanggapin sa loob ng <defs> tag.

Pagbabagong kulay na pampasiring

Ang <radialGradient> ay ginagamit upang tanggapin ang pagbagong kulay na pampasiring.

Ang <radialGradient> tag ay dapat na nakalagay sa loob ng <defs>. Ang <defs> tag ay isang pangalang maikling tag ng definitions, na nagbibigay ng kapangyarihan na tanggapin ang paglilinang ng mga espesyal na elemento tulad ng pagbabagong kulay.

Icopy ang sumusunod na kode sa notepad, at i-save ang file bilang "radial1.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>
<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>

Paliwanag ng Kode:

Ang id attribute ng <radialGradient> tag ay maaaring magbigay ng isang natatanging pangalan sa pagbagong kulay, ang fill:url(#grey_blue) attribute ay nagkakabit sa ellipse element sa pagbagong kulay, ang cx, cy at r attribute ay nagtutukoy sa labas, habang fx at fy ang nagtutukoy sa loob Ang saklaw ng kulay ng pagbabagong kulay ay maaaring magkaroon 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 pagbabagong kulay.

查看例子

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

查看例子