SVG <rect>

SVG Şekiller

SVG, geliştiricilerin kullanabileceği bazı önceden tanımlanmış şekil elemanlarına sahiptir:

• Dikdörtgen <rect>
• Daire <circle>
• Elips <ellipse>
• Düz çizgi <line>
• Çarpık çizgi <polyline>
• Çokgen <polygon>
• Yol <path>

Sonraki bölümler, her bir elementi anlatmak için rect elemanından başlayacak.

SVG Dikdörtgen - <rect>

Örnek 1

<rect> Ölçekli elementler, dikdörtgen ve dikdörtgen şekillerinin varyasyonlarını oluşturmak için kullanılır:

Bu SVG kodudur:

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

Kişisel olarak deneyin

Kod Açıklaması:

• <rect> özelliği, dikdörtgen ve dikdörtgen şekillerinin varyasyonlarını oluşturmak için kullanılır
• style özelliği, dikdörtgenin CSS özelliklerini tanımlamak için kullanılır
• CSS fill özelliği, dikdörtgenin doldurma rengini tanımlar
• CSS border-width özelliği, dikdörtgenin kenar genişliğini tanımlar
• CSS stroke özelliği, dikdörtgenin kenar rengini tanımlar

Örnek 2

Yeni özellik içeren bir başka örneğe bakalım:

Bu SVG kodudur:

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

Kişisel olarak deneyin

Kod Açıklaması:

• x özelliği, dikdörtgenin sol konumunu tanımlar (örneğin x="50", dikdörtgeni sol dış kenar boşluğundan 50 px uzaklıkta yerleştirir)
• y özelliği, dikdörtgenin üst konumunu tanımlar (örneğin y="20", dikdörtgeni yukarı dış kenar boşluğundan 20 px uzaklıkta yerleştirir)
• CSS fill-opacity özelliği, doldurma renginin şeffaflığını tanımlar (geçerli aralık: 0 ila 1)
• CSS border-opacity özelliği, çizgi renginin şeffaflığını tanımlar (geçerli aralık: 0 ila 1)

Örnek 3

Tüm elementin şeffaflığını tanımlar:

Bu SVG kodudur:

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

Kişisel olarak deneyin

Kod Açıklaması:

• CSS opacity özelliği, tüm elementin şeffaflık değerini tanımlar (geçerli aralık: 0 ila 1)

Örnek 4

Son örnekte, köşeli kenarlık içeren bir dikdörtgen oluşturma:

Bu SVG kodudur:

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

Kişisel olarak deneyin

Kod Açıklaması:

• rx ve ry özellikleri, dikdörtgenin köşelerini yuvarlatır