Gradien SVG - Radial
Gradien Radial SVG - <radialGradient>
Elemen <radialGradient> digunakan untuk mendefinisikan gradien radial.
Elemen <radialGradient> harus bersarang di dalam tag <defs>. Tag <defs> adalah kependekan dari definisi dan berisi definisi elemen khusus (seperti gradien).
Contoh 1
Tentukan elips dengan gradien radial dari putih ke biru:
Berikut adalah kode SVG:
Contoh
<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>
Penjelasan kode:
- Atribut id dari tag <radialGradient> mendefinisikan nama unik untuk gradien
- Atribut cx, cy dan r mendefinisikan lingkaran terluar dan fx dan fy mendefinisikan lingkaran terdalam
- Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan tag <stop>. Atribut offset digunakan untuk menentukan di mana warna gradien dimulai dan diakhiri
- Atribut fill menautkan elemen elips ke gradien
Contoh 2
Tentukan elips lain dengan gradien radial dari putih ke biru:
Berikut adalah kode SVG:
Contoh
<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>