SVG Radial Gradient - <radialGradient>
The <radialGradient> elemen digunakan untuk menentukan gradien radial.
The <radialGradient> elemen harus bersarang dalam <defs> tag. The <defs> tag adalah singkatan definisi dan mengandung definisi elemen khusus (such as gradients) .
contoh 1
Mendefinisikan sebuah 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>
Cobalah sendiri " Code explanation:
- The id atribut dari <radialGradient> tag mendefinisikan nama yang unik untuk gradien
- cx itu, cy dan atribut r menentukan lingkaran terluar dan fx dan fy menentukan lingkaran terdalam
- Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan <stop> tag. The offset atribut digunakan untuk mendefinisikan mana warna gradient mulai dan berakhir
- The fill atribut sponsor elemen elips untuk gradien
contoh 2
Mendefinisikan 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>
Cobalah sendiri "