Kali ini saya akan bahas tentang SVG Rectangle, Circle, Ellipse, Line...
SVG Rectangle
<rect> berguna untuk memunculkan sebuah persegi panjang.
berikut contoh syntax nya :
Penjelasan tentang coding :
1. width dan height adalah untuk menentukan seberapa besar persegi panjang yang akan ditampilkan.
2, Atribut style di coding tersebut digunakan untuk mendefinisikan css yang akan digunakan.
3. Properti css fill berguna untuk menentukan warna yang akan diberikan pada persegi panjang tersebut.
4. atribut stroke-width berguna untuk menentukan seberapa besar outline yang akan ditampilkan.
5. atribut stroke berguna untuk menentukan warna yang akan diberikan pada outline.
Berikut adalah contoh coding untuk atribut tambahan :
atribut x dan y adalah untuk menentukan posisi persegi panjang tersebut.
atribut opacity adalah untuk menentukan opacity dari persegi panjang tersebut.
Berikut contoh untuk membuat rounded rectangle :
atribut rx dan ry berfungsi untuk menentukan lengkungan yang akan diberikan pada persegi panjang tersebut.
SVG Circle
Berikut contoh untuk membuat bentuk lingkaran dengan menggunakan SVG :
atribut cx dan cy berfungsi untuk mengatur koordinat-koordinat titik lingkaran tersebut sedangkan atribut r berfungsi untuk menentukan radius dari lingkaran tersebut.
SVG Ellipse
Berikut contoh untuk membuat bentuk ellipse (mirip dengan oval) :
atribut cx dan cy berfungsi untuk menentukan koordinat titik x dan y pada ellipse tersebut.
atribut rx dan ry berfungsi untuk menentukan radius horizontal dan vertical pada ellipse tersebut.
SVG Line
Berikut adalah contoh untuk membuat bentuk garis :
atribut x1 dan y1 berfungsi untuk menentukan awal mulai dari garis tersebut di axis x maupun axis y.
atribut x2 dan y2 berfungsi kebalikan dengan x1 dan y1 yaitu untuk menentukan dimana garis tersebut akan berhenti ditarik baik di axis x maupun axis y.
Sekian dulu ya untuk materi kali ini...
Semoga Bermanfaat....
Tuhan Yesus memberkati...
No comments:
Post a Comment