SVG <rect>

SVG, geliştiricilerin kullanımı ve işlemesi için bazı önceden tanımlanmış şekil elementleri içerir.

SVG Şekilleri

SVG, geliştiricilerin kullanımı ve işlemesi için bazı önceden tanımlanmış şekil elementleri içerir:

  • Düğüm <rect>
  • Daire <circle>
  • Elips <ellipse>
  • Çizgi <line>
  • Çarpık çizgi <polyline>
  • Çokgen <polygon>
  • Yol <path>

Aşağıdaki bölümler, bu elementleri size açıklamak için tasarlanmıştır. Öncelikle, düğüm elementi ile başlayacağız.

<rect> etiketi

<rect> etiketi, düğümü ve düğüm varyasyonlarını oluşturmak için kullanılır.

Çalışma prensibini anlamak için bu kodları not defterine kopyalayın, ardından "rect1.svg" dosyası olarak kaydedin. Bu dosyayı web dizinine ekleyin:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Kod Açıklaması:

  • rect özelliği, düğümün yüksekliğini ve genişliğini tanımlamak için kullanılır
  • style özelliği, CSS özelliklerini tanımlamak için kullanılır
  • CSS'nin fill özelliği, düğüm doldurma rengini tanımlar (rgb değeri, renk adı veya onaltılık değer)
  • CSS'nin stroke-width özelliği, düğüm çerçevesinin genişliğini tanımlar
  • CSS'nin stroke özelliği, düğüm çerçevesinin rengini tanımlar

Bu örneği kontrol edin

Yeni özellik içeren bir diğer örneği inceleyelim:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Örnek açıklaması:

  • x özelliği, düğümün sol konumunu tanımlar (örneğin, x="0" ise düğümün tarayıcı penceresinin soluna olan mesafesi 0px'dır)
  • y özelliği, düğümün üst konumunu tanımlar (örneğin, y="0" ise düğümün tarayıcı penceresinin üstüne olan mesafesi 0px'dır)
  • CSS'nin fill-opacity özelliği, doldurma renginin şeffaflığını tanımlar (geçerli aralık: 0 - 1)
  • CSS'nin stroke-opacity özelliği, çizgi renginin şeffaflığını tanımlar (geçerli aralık: 0 - 1)

Örnekleri Gör

整个元素定义不 şeffaflık:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Kod Açıklaması:

CSS'nin opacity özelliği, tüm elemanın şeffaflık değerini tanımlar (geçerli aralık: 0 - 1)

Örnekleri Gör

Son örnek, köşeli rectangle oluşturma:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Kod Açıklaması:

rx ve ry özellikleri,矩形的圆角产生。

Örnekleri Gör