SVG <rect>

Bentuk SVG

SVG memiliki beberapa elemen bentuk yang diatur untuk digunakan para pengembang:

• Segiempat <rect>
• Bola <circle>
• Ellips <ellipse>
• Garis <line>
• Garis Bungkus <polyline>
• Poligon <polygon>
• Jalur <path>

Bab berikutnya akan memulai dengan elemen rect untuk menjelaskan setiap elemen.

SVG Segi Empat - <rect>

Contoh 1

<rect> Elemen ini digunakan untuk membuat persegi serta variasi bentuk persegi

Ini adalah kod 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>

Cuba Sendiri

Pengertian Kod

• Properti width dan height elemen <rect> menentukan tinggi dan lebar persegi
• Guna properti style untuk menentukan properti CSS persegi
• Guna properti fill CSS untuk menentukan warna pengisi persegi
• Guna properti border-width CSS untuk menentukan lebar pinggir persegi
• Guna properti stroke CSS untuk menentukan warna pinggir persegi

Contoh 2

Jangan lupa, lihat contoh lain yang mengandung properti baru:

Ini adalah kod 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>

Cuba Sendiri

Pengertian Kod

• Guna properti x untuk menentukan kedudukan kiri persegi (contoh: x="50" akan menempatkan persegi di tempat 50 px dari marjin kiri)
• Guna properti y untuk menentukan kedudukan atas persegi (contoh: y="20" akan menempatkan persegi di tempat 20 px dari marjin atas)
• Guna properti fill-opacity CSS untuk menentukan kecerahan warna pengisi (batasan sah: 0 hingga 1)
• Guna properti border-opacity CSS untuk menentukan kecerahan warna pengecor (batasan sah: 0 hingga 1)

Contoh 3

Tentukan kecerahan keseluruhan elemen:

Ini adalah kod 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>

Cuba Sendiri

Pengertian Kod

• Guna properti opacity CSS untuk menentukan kecerahan keseluruhan elemen (batasan sah: 0 hingga 1)

Contoh 4

Contoh terakhir, buat persegi panjang dengan sudut bulat:

Ini adalah kod 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>

Cuba Sendiri

Pengertian Kod

• Properti rx dan ry membuat sudut persegi menjadi bulat