SVG <Rect>

SVG Bentuk

SVG memiliki beberapa elemen bentuk yang telah ditetapkan yang dapat digunakan oleh pengembang:

• Rectangle <rect>
• Lingkaran <circle>
• Ellipse <ellipse>
• Baris <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

Bab-bab berikut akan menjelaskan setiap elemen, dimulai dengan unsur rect.

SVG Rectangle - <rect>

contoh 1

The <rect> elemen digunakan untuk membuat sebuah persegi panjang dan variasi dari bentuk persegi panjang:

Berikut adalah kode SVG:

Code explanation:

• Lebar dan tinggi atribut dari <rect> elemen menentukan tinggi dan lebar persegi panjang
• The 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:

Berikut adalah kode SVG:

Code explanation:

• The x atribut mendefinisikan posisi kiri persegi panjang (misalnya x = "50" menempatkan persegi panjang 50 px dari margin kiri)
• The 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 (legal range: 0 to 1)
• Properti CSS stroke opacity mendefinisikan opacity dari warna stroke (legal range: 0 to 1)

contoh 3

Tentukan opacity untuk seluruh elemen:

Berikut adalah kode SVG:

Code explanation:

• Properti CSS opacity mendefinisikan nilai opacity untuk seluruh elemen (legal range: 0 to 1)

contoh 4

contoh terakhir, menciptakan sebuah persegi panjang dengan sudut membulat:

Berikut adalah kode SVG:

Code explanation:

• The rx dan ry atribut putaran sudut-sudut persegi panjang