Tutorial SVG Part 2 (1412)

Hai lagi semua, pada hari ini, kita akan membahas tentang svg lagi.

Seperti yang telah dijelaskan cara membuat grid dengan menggunakan svg kemarin, hari ini kita akan mencoba membuat grid seperti itu dengan menggunakan javascript. Emangnya bisa ya? Bisa donk.

Daripada penasaran, lebih baik kita langsung melihat cara membuatnya.

Beginilah scriptnya, simpan dalam bentuk HTML saja

Dan hasilnya adalah

Berikut adalah penjelasan coding tersebut. Function getNode digunakan untuk membuat SVG dan membuat sintaks atribut SVG tersebut.

append child digunakan untuk menambahkan suatu elemen setelah elemen lain.

 var x digunakan untuk mendeklarasikan variabel, dan getNode adalah function yang telah kita buat sebelumnya untuk membuat objek pada SVG.

Pada objek line, terdapat atribut x1, y1, x2, y2, stroke, dan stroke width, seperti yang telah dijelaskan pada artikel sebelumnya, x1 dan y1 adalah titik awal dari garis tersebut, sedangkan x2 dan y2 adalah titik akhir dari garisnya, stroke adalah warna untuk garis tersebut, dan strokeWidth untuk menentukan tebal garis. Kita tidak dapat menggunakan fill pada elemen line,  karena pada elemen ini, tidak terdapat ruang untuk membuat fill, jika ingin membuat fill, lebih baik menggunakan elemen rect atau persegi untuk membuat warna isinya.

Nah, gampang bukan membuat grid pada javascript? Semoga tutorial ini membantu.

Thanks for reading XOXO.