SVG <rect>

SVG memiliki beberapa elemen bentuk yang diumumkan, dapat digunakan dan dieksekusi oleh pengembang.

Bentuk SVG

SVG memiliki beberapa elemen bentuk yang diumumkan, dapat digunakan dan dieksekusi oleh pengembang:

  • Persegi panjang <rect>
  • Bola <circle>
  • Ellips <ellipse>
  • Garis <line>
  • Garis lurus <polyline>
  • Poligon <polygon>
  • Jalur <path>

Bab berikut akan menjelaskan elemen-elemen ini, mulai dari elemen persegi panjang.

Tanda <rect>

Tanda <rect> dapat digunakan untuk membuat persegi panjang serta variasi persegi panjang.

Untuk memahami prinsip kerjanya, salin kode ini ke notepad dan simpan sebagai berkas "rect1.svg". Masukkan berkas ini ke direktori web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Pengertian Kod:

  • Properti width dan height elemen rect dapat mendefinikan tinggi dan lebar persegi panjang
  • Properti style digunakan untuk mendefinikan properti CSS
  • Properti fill CSS mendefinikan warna pengisi persegi panjang (nilai rgb, nama warna atau nilai heksadesimal)
  • Properti stroke-width CSS mendefinikan lebar garis pinggir persegi panjang
  • Properti stroke CSS mendefinikan warna garis pinggir persegi panjang

Lihat contoh ini

Biarkan kita lihat contoh lain yang mengandung properti baru:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Contoh penjelasan:

  • Properti x mendefinikan posisi kiri persegi panjang (contoh, x="0" mendefinikan jarak persegi panjang ke kiri jendela browser adalah 0px)
  • Properti y mendefinikan posisi atas persegi panjang (contoh, y="0" mendefinikan jarak persegi panjang ke atas jendela browser adalah 0px)
  • Properti fill-opacity CSS mendefinikan kecerahan warna pengisi (rentang yang sah adalah: 0 - 1)
  • Properti stroke-opacity CSS mendefinikan kecerahan warna penanda (rentang yang sah adalah: 0 - 1)

Lihat Contoh

mengdefinikan kecerahan bagi elemen seluruhnya:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Pengertian Kod:

Properti opacity CSS menentukan nilai kecerahan keseluruhan elemen (rentang sah adalah: 0 - 1)

Lihat Contoh

Contoh terakhir, membuat persegi panjang dengan sudut bulat:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Pengertian Kod:

rx dan ry properti dapat membuat persegi panjang terbentuk bulat.

Lihat Contoh