Latest web development tutorials

SVG Gradient - Radioaktif

SVG radioaktif bertahap - <radialGradient>

<RadialGradient> elemen digunakan untuk menentukan gradien radial.

<RadialGradient> tag harus bersarang di dalam <defs> interior. <Defs> tag adalah definisi akronim, seperti elemen khusus yang dapat didefinisikan seperti gradien.

contoh 1

Tentukan gradien radial dari putih ke oval biru:

Berikut adalah Kode SVG:

contoh

<SVG xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Defs>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
<Hentikan offset = "0%" style = "stop-color: rgb (255255255);
stop-opacity: 0 "/>
<Hentikan offset = "100%" style = "stop-color: rgb (0,0,255); stop-opacity: 1" />
</ RadialGradient>
</ Defs>
<Ellipse cx = "200" cy = "70" rx = "85" ry = "55" isi = "url (# grad1)" />
</ Svg>

Coba »

Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).

analisis kode:

  • atribut id <radialGradient> tag bisa menjadi nama yang unik untuk definisi gradien
  • CX, CY, dan atribut r mendefinisikan lingkaran terluar dan Fx dan Fy menentukan lingkaran terdalam
  • Kisaran warna gradien dapat terdiri dari dua atau lebih warna. Setiap warna yang ditentukan dengan menggunakan sebuah <berhenti> tag. offset digunakan untuk menentukan awal dan akhir gradien
  • Isi elemen properti untuk link ke gradien elips

contoh 2

Didefinisikan gradien radial dari putih ke oval biru lain:

Berikut adalah Kode SVG:

contoh

<SVG xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Defs>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" r = "30%" fx = "50%" fy = "50%">
<Hentikan offset = "0%" style = "stop-color: rgb (255255255);
stop-opacity: 0 "/>
<Hentikan offset = "100%" style = "stop-color: rgb (0,0,255); stop-opacity: 1" />
</ RadialGradient>
</ Defs>
<Ellipse cx = "200" cy = "70" rx = "85" ry = "55" isi = "url (# grad1)" />
</ Svg>

Coba »

Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).