Gradien Radiasi SVG

Definisi gradasi SVG harus dilakukan di dalam tag <defs>.

Gradasi radiasi

Tag <radialGradient> digunakan untuk mendefinisikan gradasi radiasi.

Tag <radialGradient> harus disisipkan di dalam tag <defs>. Tag <defs> adalah singkatan untuk definitions, yang memungkinkan untuk mendefinisikan elemen khusus seperti gradasi.

Silakan salin kode di bawah ini ke notepad, lalu simpan berkas sebagai "radial1.svg". Letakkan berkas 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>

Pengertian kode:

Properti id tag <radialGradient> dapat menentukan nama unik untuk definisi gradasi, properti fill:url(#grey_blue) menghubungkan elemen ellips ke gradasi ini, properti cx, cy, dan r menentukan luar kerucut, sementara properti fx dan fy menentukan dalam kerucut Jangkauan warna gradasi dapat terdiri dari dua atau lebih warna. Setiap warna diatur oleh tag <stop>. Properti offset digunakan untuk menentukan posisi awal dan akhir gradasi.

Lihat Contoh

Contoh lainnya:

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