SVG <rect>

Bentuk SVG

SVG memiliki beberapa elemen bentuk yang diatur sebelumnya tersedia untuk pengembang untuk digunakan:

• Segi Panjang <rect>
• Lingkaran <circle>
• Ellips <ellipse>
• Garis <line>
• Garis Lintasan <polyline>
• Poligon <polygon>
• Jalur <path>

Bab selanjutnya akan memulai dengan elemen <rect> untuk menjelaskan setiap elemen.

SVG Segi Empat

Contoh 1

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

Ini adalah kode SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Coba Sendiri

Penjelasan Kode:

• Properti width dan height elemen <rect> menentukan tinggi dan lebar persegi panjang
• Properti style digunakan untuk mendefinisikan properti CSS persegi panjang
• Properti fill CSS menentukan warna pengisi persegi panjang
• Properti border-width CSS menentukan lebar garis persegi panjang
• Properti stroke CSS menentukan warna garis persegi panjang

Contoh 2

Mari lihat contoh lain yang mengandung properti baru:

Ini adalah kode SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Coba Sendiri

Penjelasan Kode:

• Properti x menentukan posisi kiri persegi panjang (contoh: x="50" menempatkan persegi panjang di posisi 50 px dari marjin kiri)
• Properti y menentukan posisi atas persegi panjang (contoh: y="20" menempatkan persegi panjang di posisi 20 px dari marjin atas)
• Properti fill-opacity CSS menentukan kecerahan warna pengisi (rentang yang sah: 0 sampai 1)
• Properti border-opacity CSS menentukan kecerahan warna garis (rentang yang sah: 0 sampai 1)

Contoh 3

Definisi kecerahan elemen secara keseluruhan:

Ini adalah kode SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Coba Sendiri

Penjelasan Kode:

• Properti opacity CSS menentukan nilai kecerahan elemen secara keseluruhan (rentang yang sah: 0 sampai 1)

Contoh 4

Contoh terakhir, membuat persegi panjang dengan ujung yang melengkung:

Ini adalah kode SVG:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Coba Sendiri

Penjelasan Kode:

• Properti rx dan ry membuat ujung persegi berbentuk lingkaran