SVG Radial Gradient - <radialGradient>
<radialGradient> elemen digunakan untuk menentukan gradien radial.
<radialGradient> elemen harus bersarang dalam <defs> tag. <defs> tag adalah singkatan definisi dan mengandung definisi elemen khusus (seperti gradien).
Contoh 1
<svg width="500" height="150">
<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>
Kode penjelasan:
- Id atribut <radialGradient> mendefinisikan sebuah nama untuk gradien
- Cx , cy dan atribut r menentukan lingkaran luar dan fx dan fy menentukan lingkaran dalam
- Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan <stop> tag. Atribut offset digunakan untuk menentukan di mana gradien warna mulai dan akhir
- Mengisi atribut menghubungkan elemen elips untuk gradien
Contoh 2
<svg width="500" height="150">
<defs>
<radialGradient id="grad1" 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(#grad1)"/>
</svg>
0 komentar:
Posting Komentar