SVG Bentuk
SVG memiliki beberapa elemen bentuk standar yang dapat digunakan oleh pengembang:
- Rectangle <rect>
- Lingkaran <circle>
- Ellipse <elips>
- Baris <line>
- Polyline <polyline>
- Polygon <poligon>
- Jalur <path>
Bab-bab berikut akan menjelaskan setiap elemen, dimulai dengan unsur rect.
SVG Rectangle - <rect>
Contoh 1
<rect> elemen digunakan untuk membuat persegi panjang dan variasi bentuk persegi panjang:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:blue;stroke-width:3;stroke:black;"/>
</svg>
Kode penjelasan:
- Atribut width dan height dari <rect> elemen menentukan tinggi dan lebar persegi panjang
- Style atribut digunakan untuk mendefinisikan properti CSS untuk persegi panjang
- Properti CSS mengisi mendefinisikan warna mengisi persegi panjang
- Properti CSS stroke-width mendefinisikan lebar perbatasan persegi panjang
- Properti CSS Stroke mendefinisikan warna perbatasan persegi panjang
Contoh 2
Mari kita lihat contoh lain yang berisi beberapa atribut baru:
<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>
Kode penjelasan:
- X atribut mendefinisikan posisi kiri persegi panjang (misalnya x = "50" menempatkan persegi panjang 50 px dari margin kiri)
- Y atribut mendefinisikan posisi atas persegi panjang (misalnya y = "20" menempatkan persegi panjang 20 px dari margin atas)
- Properti CSS fill-opacity mendefinisikan opacity warna fill (sekisar: 0-1)
- Properti CSS stroke-opacity mendefinisikan opacity warna stroke (sekisar: 0-1)
Contoh 3
Tentukan opacity untuk seluruh elemen:
<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>
Kode penjelasan:
- Properti CSS opacity mendefinisikan nilai opacity untuk seluruh elemen (sekisar: 0-1)
Contoh 4
Contoh terakhir, menciptakan sebuah persegi panjang dengan sudut membulat:
<svg width="400" height="180">
<rect x=50 y=20 rx="20" ry="20" width="150" height="150"
style="fill:blue;stroke:black;stroke-width:5;opacity:0.5;"/>
</svg>
Kode penjelasan:
- Rx dan ry atribut putaran sudut-sudut persegi panjang
0 komentar:
Posting Komentar