SVG Drop Shadow (1412)

Hi guys, hari ini kita akan membahas tentang SVG lagi, materi yang akan kita bahas adalah mengenai cara membuat efek shadow pada objek pada SVG.

Pertama, kita perlu membuat objeknya, saya akan membuat sebuah persegi, seperti pada script berikut

Sehingga munculnya adalah gambar persegi seperti ini

 

Berikutnya, kita tambahkan tag <filter> dan isinya, berikan id pada tag <filter> supaya dapat objek pada SVG dapat di-link-kan dengan filternya, caranya adalah dengan menambahkan filter=”url(#idfilter)” pada objek di SVG. Seperti di coding berikut

Langkah selanjutnya adalah menambah isi pada tag <filter> dengan script seperti ini

Maka muncul hasilnya seperti ini

Berikut adalah penjelasan codingnya

stdDeviation pada tag <feGaussianBlur> menyatakan jumlah blurnya. <feColorMatrix> digunakan untuk mengubah warna pada shadow sehingga mendekati warna hitam, ketiga value ‘0.2’ pada matrix dikalikan dengan warna merah, hijau, dan biru. Dan mengurangi value mereka sehingga warnanya mendekati warna hitam (nomor untuk warna hitama adalah 0).

Nah, demikianlah tutorial untuk membuat drop shadow pada elemen SVG, semoga artikel ini bermanfaat.

Thanks for reading XOXO