SVG <rect>

SVG Şekilleri

SVG geliştiriciler tarafından kullanılabilecek bazı önceden tanımlanmış şekil öğesi vardır:

• Dikdörtgen <rect>
• Çember <circle>
• Elips <ellipse>
• Çizgi <line>
• Polyline <polyline>
• Poligon <polygon>
• Yol <path>

Aşağıdaki bölümlerde rect elemanı başlayarak her bir öğeyi açıklayacağız.

SVG Dikdörtgen - <rect>

Örnek 1

<rect> elemanı bir dikdörtgen ve bir dikdörtgen şeklinde varyasyonlarını oluşturmak için kullanılır:

İşte SVG kodu:

Code explanation:

• Genişlik ve yükseklik özellikleri <rect> elemanının yüksekliği ve dikdörtgenin genişliğini belirlemek
• style nitelik dikdörtgen için CSS özelliklerini tanımlamak için kullanılır
• CSS dolgu özelliği dikdörtgenin dolgu rengini tanımlar
• CSS vuruş genişliği özelliği, dikdörtgenin sınırının genişliği tanımlar
• CSS vuruş özelliği dikdörtgenin kenar rengini tanımlar

Örnek 2

en yeni özelliklerini içeren başka bir örneğe bakalım:

İşte SVG kodu:

Code explanation:

• x özelliği, dikdörtgenin sol konumu tanımlar (örneğin, x = "50" sol kenardan dikdörtgen 50 px yerleştirir)
• y özelliği, dikdörtgen üst konumunu tanımlar (örneğin, y = "20" üst kenar dikdörtgenin 20 px yerleştirir)
• CSS dolum opaklık özelliği dolgu renk opaklığını tanımlar (legal range: 0 to 1)
• CSS inme opaklık özelliği strok renk opaklığını tanımlar (legal range: 0 to 1)

Örnek 3

Bütün element için saydamlığını tanımlayın:

İşte SVG kodu:

Code explanation:

• CSS opaklık özelliği bütün eleman için opaklık değerini tanımlar (legal range: 0 to 1)

Örnek 4

Son bir örnek, köşeleri yuvarlatılmış bir dikdörtgen oluşturmak:

İşte SVG kodu:

Code explanation:

• Rx ve ry özellikleri dikdörtgenin köşelerinde yuvarlar