SVG <rect>

Bentuk SVG

SVG memiliki beberapa elemen bentuk standar yang dapat digunakan oleh pengembang:

• Persegi panjang <rect>
• Lingkaran <lingkaran>
• Elips <elips>
• Baris <baris>
• Polyline <polyline>
• Poligon <poligon>
• Jalan <jalan>

Bab-bab berikut akan menjelaskan setiap elemen, dimulai dengan elemen rect.

Persegi Panjang SVG - <rect>

Contoh 1

Elemen <rect> digunakan untuk membuat persegi panjang dan variasi bentuk persegi panjang:

Berikut adalah kode SVG:

Penjelasan kode:

• Atribut lebar dan tinggi dari elemen <rect> menentukan tinggi dan lebar persegi panjang
• Atribut style digunakan untuk mendefinisikan properti CSS untuk persegi panjang
• Properti isian CSS mendefinisikan warna isian persegi panjang
• Properti stroke-width CSS mendefinisikan lebar perbatasan persegi panjang
• Properti stroke CSS mendefinisikan warna perbatasan persegi panjang

Contoh 2

Mari kita lihat contoh lain yang berisi beberapa atribut baru:

Berikut adalah kode SVG:

Penjelasan kode:

• Atribut x mendefinisikan posisi kiri persegi panjang (misalnya x="50" menempatkan persegi panjang 50 px dari margin kiri)
• Atribut y mendefinisikan posisi atas persegi panjang (misalnya y="20" menempatkan persegi panjang 20 px dari margin atas)
• Properti isi-opasitas CSS mendefinisikan opasitas warna isian (rentang hukum: 0 hingga 1)
• Properti stroke-opacity CSS mendefinisikan opacity warna stroke (rentang hukum: 0 hingga 1)

Contoh 3

Tentukan opacity untuk seluruh elemen:

Berikut adalah kode SVG:

Penjelasan kode:

• Properti opacity CSS mendefinisikan nilai opacity untuk seluruh elemen (rentang hukum: 0 hingga 1)

Contoh 4

Contoh terakhir, buat persegi panjang dengan sudut membulat:

Berikut adalah kode SVG:

Penjelasan kode:

• Atribut rx dan ry membulatkan sudut persegi panjang