SVG persegi panjang
SVG Bentuk
SVG memiliki beberapa elemen bentuk yang telah ditetapkan, dapat digunakan oleh pengembang untuk menggunakan dan mengoperasikan:
- Rectangle <rect>
- Putaran <lingkaran>
- Oval <elips>
- Baris <baris>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
Bagian berikut akan menjelaskan kepada Anda unsur-unsur ini, mulai dari unsur persegi panjang.
SVG persegi panjang - <rect>
contoh 1
<Rect> tag digunakan untuk membuat persegi panjang, dan varian persegi panjang:
Berikut adalah Kode SVG:
contoh
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- lebar dan tinggi atribut elemen rect menentukan tinggi dan lebar persegi panjang
- properti gaya digunakan untuk mendefinisikan properti CSS
- properti CSS mengisi mendefinisikan persegi panjang mengisi warna (nilai-nilai rgb, nama warna atau nilai heksadesimal)
- Lebar properti stroke lebar CSS mendefinisikan perbatasan persegi panjang
- Properti warna stroke CSS mendefinisikan perbatasan persegi panjang
contoh 2
Mari kita lihat contoh lain, mengandung sejumlah properti baru:
Berikut adalah kode SVG:
contoh
<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 »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- atribut X mendefinisikan posisi kiri persegi panjang (misalnya, x = "0" untuk mendefinisikan persegi panjang ke sisi kiri jendela browser, jaraknya 0px)
- Top posisi y atribut mendefinisikan persegi panjang (misalnya, y = "0" dari definisi persegi panjang ke atas jendela browser 0px)
- Properti fill-opacity CSS mendefinisikan transparansi warna isi (kisaran hukum: 0--1)
- Properti CSS stroke opacity mendefinisikan transparansi warna stroke (kisaran hukum: 0--1)
contoh 3
Tentukan opacity dari seluruh elemen:
Berikut adalah Kode SVG:
contoh
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
- properti CSS opacity mendefinisikan nilai dari elemen transparan (kisaran: 0-1).
contoh 4
Contoh terakhir, membuat persegi panjang bulat:
Berikut adalah Kode SVG:
contoh
<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 »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
- rx dan ry atribut dapat menghasilkan persegi panjang bulat.