Radial Gradien pada Objek SVG (1412)

Hi guys, hari ini kita akan membahas tentang cara membuat gradien pada sebuah objek di SVG.

Pertama, kita buat sebuah objek terlebih dahulu, di contoh ini, saya akan menggunakan objek lingkaran.

Seperti inilah scriptnya :

 

Lalu setelah dijalankan di browser, inilah hasilnya :

Lalu kita tambahkan tag <radialGradient> seperti yang ada di script berikut :

Jangan lupa ubah fill yang ada di <ellipse> menjadi seperti berikut :

Dan hasilnya seperti ini :

Berikut adalah penjelasan coding tersebut :

Tag <radialGradient> adalah tag untuk menambah gradien secara radial dengan ketentuan sebagai berikut, tambahkan id sehingga kita dapat menghubungkannya dengan fill di ellipse, kemudian cx adalah titik horizontal gradien, cy merupakan titik vertikal gradien, dan r adalah besar gradiennya.

Dalam tag <radialGradient>, kita menggunakan <stop/> untuk menentukan warna gradien, kita menggunakan 2 <stop/>, pada <stop/> yang pertama, kita membuat offsetnya adalah 0%, artinya adalah kita mengatur besar warna pertama pada gradien tersebut. Sedangkan offset pada <stop/> kedua, digunakan untuk mengatur besar warna yang kedua. Kemudian kita berikan cssnya. Stop-color digunakan untuk memberi warna gradien, kemudian stop-opacity untuk menentukan kecerahan dari warna tersebut, angka 1 untuk tidak memberikan opacity, bisa juga dihapus jika tidak ingin menggunakannya.

Demikianlah tutorial membuat gradien pada objek di SVG, jika terdapat kesalahan mohon dimaafkan dan dikoreksi. Thank you for reading XOXO.