tutorial pengembangan web terbaru
 

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:

style = "fill: rgb (0,0,255); stroke width: 3; Stroke: rgb (0,0,0)" /> Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Cobalah sendiri "

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:

Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<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>
Cobalah sendiri "

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:

Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<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>
Cobalah sendiri "

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:

Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<svg width="400" height="180">
  <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>
Cobalah sendiri "

Code explanation:

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