Gradasi Radiasi SVG

Penampang SVG mesti ditakrifkan di dalam tag <defs>.

Penampang radiasi

Tag <radialGradient> digunakan untuk menentukan penampang radiasi.

Tag <radialGradient> mesti terletak di dalam tag <defs>. Tag <defs> adalah singkatan daripada definitions, ia membenarkan untuk menentukan elemen khas seperti penampang.

Sila salin kod di bawah ini ke Notepad dan simpan fail sebagai "radial1.svg". Letakkan fail ini ke direktori web anda:

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

Pengartian kod:

Properti id tag <radialGradient> boleh ditakrifkan nama unik bagi penampang, properti fill:url(#grey_blue) menghubungkan elemen ellipse kepada penampang ini, cx, cy dan r menentukan luar kerusi, sementara fx dan fy menentukan dalaman kerusi Range warna penampang dapat terdiri daripada dua atau lebih warna. Setiap warna diatur oleh tag <stop>. Properti offset digunakan untuk menentukan lokasi mulai dan tamat penampang.

Lihat Contoh

Satu contoh lain:

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

Lihat Contoh