HTML SVG Ders_3 SVG Dikdörtgen (Rectangle)

SVG Geometrik Şekil Elemanları

<rect> elemanı ile bir dikdörtgen çizilir. Fakat HTML, başka geometrik şekiller için de svg tagları içerir. Aşağıda bu tagların listesini görüyorsunuz:

  • Dikdörtgen (Rectangle) <rect>
  • Daire (Circle) <circle>
  • Elips (Ellipse) <ellipse>
  • Çizgi (Line) <line>
  • Kırık Doğru (Polyline) <polyline>
  • Çokgen (Polygon) <polygon>
  • Yörünge (Path) <path>

Dikdörtgenden başlayarak, bu elemanların her biri için bir ders yapacağız.

SVG Dikdörtgen (<rect>) Elemanı

Aşağıda <rect> elemanı ile çizilmiş bir dikdörtgen görüyoruz:



Bu dairenin kodları şunlardır:


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

Bu kodların anlamı şudur:

<svg width="400" height="110"kodu ile 400 pixel'e 110 pixel ebatlarında bir svg çizim bölgesi (tuval) oluşturduk.

<rect width="300" height="100" kodu ile 300 pixel'e 100 pixel ebatlarında bir dikdörtgen tanımladık.

x="3" y="3" kodları ile de, dikdörtgenin sol üst köşesinin koordinatlarını (dikdörtgenin başlangıç noktasını) belirledik. 

style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" kodlarında: 

  • fill:rgb(0,0,255) kısmı ile dikdörtgenin dolgu rengini ayarladık, 
  • stroke-width:3 kısmı ile dikdörtgenin kenarlık kalınlığını ayarladık, 
  • stroke:rgb(0,0,0) kısmı ile de, dikdörtgenin kenarlık rengini ayarladık.

Aşağıda başka özellikler taşıyan bir dikdörtgen (kare) verilmiştir:





Bu dikdörtgenin kodları şöyledir:

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

Bu kodlarda farklı olan özellikler ve anlamları şöyledir:

  • x="50" y="20" kodları, dikdörgenin sol üst köşesinin koordinatlarıdır.
  • fill-opacity:0.1 kodu dolgu şeffaflığını yüzde 90 olarak ayarlar. (0.1 geçirmezlik)
  • stroke-opacity:0.9 kodu, kenarlık çizgisinin şeffaflığını yüzde 10 olarak ayarlar. (0.9 geçirmezlik)

Aşağıda başka özellikler taşıyan bir dikdörtgen daha verilmiştir:





Bu dikdörtgenin kodları şöyledir:

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

Diğer dikdörtgen kodlarından farklı olarak bu dikdörtgende, opacity:0.5 stil özelliğini görüyoruz. Bu özellik, bütün şeklin şeffaflığını yüzde 50 olarak ayarlar.

Aşağıda köşeleri oval bir dikdörtgen daha verilmiştirrr:





Bu dikdörtgenin kodları şöyledir:

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

Bu kodda farklı olarak rx="20" ry="20" özelliklerini görüyoruz. Köşelere ovallik katan özellikler bu ikisidir. 


Hiç yorum yok:

Yorum Gönder