SVG <rect>

SVG memiliki beberapa elemen bentuk yang di预定义, dapat digunakan dan dioperasikan oleh pengembang.

Bentuk SVG

SVG memiliki beberapa elemen bentuk yang di预定义, dapat digunakan dan dioperasikan oleh pengembang:

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

Bagian berikutnya akan menjelaskan elemen-elemen ini, mulai dari elemen persegi panjang.

Tag <rect>

Tag <rect> dapat digunakan untuk membuat persegi panjang dan variasi persegi panjang.

Untuk memahami prinsip kerjanya, salin kode ini ke notepad dan simpan sebagai berkas "rect1.svg". Letakkan 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>

Penjelasan Kode:

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

Lihat contoh ini

Biarkan kita lihat contoh lain yang mengandung atribut 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>

Pengertian contoh:

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

Lihat Contoh

mengdefinikan kecerahan 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>

Penjelasan Kode:

Properti opacity CSS menentukan nilai transparan elemen yang didefiniskan (rentang yang sah adalah: 0 - 1)

Lihat Contoh

Contoh terakhir, buat segitiga terlunak dengan rounded corner:

<?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>

Penjelasan Kode:

Properti rx dan ry dapat membuat segitiga terlunak.

Lihat Contoh