SVG to‘rtburchak

SVG shakllari

SVG’da dasturchilar foydalanishi mumkin bo‘lgan bir nechta oldindan belgilangan shakl elementlari mavjud:

• To‘rtburchak <rect>
• Aylana <circle>
• Ellips <ellipse>
• Chiziq <line>
• Siniq chiziq <polyline>
• Ko‘pburchak <polygon>
• Yo‘l (path) <path>

Keyingi boblarda har bir element <rect> elementidan boshlab tushuntiriladi.

SVG to‘rtburchak - <rect>

<rect> elementi to‘rtburchak va to‘rtburchak shaklining turli variantlarini yaratish uchun ishlatiladi.

<rect> elementida to‘rtburchakni joylashtirish va shaklini belgilash uchun oltita asosiy atribut bor:

SVG to‘rtburchak

Ushbu misolda oltita asosiy atribut va to‘ldirish rangiga ega to‘rtburchak yaratiladi:

SVG kodi quyidagicha:

Kod izohi:

• <rect> elementining width va height atributlari to‘rtburchakning balandligi va kengligini belgilaydi
• x va y atributlari SVG canvas’ida to‘rtburchak yuqori chap burchagining x va y pozitsiyasini belgilaydi (x="10" to‘rtburchakni chap chetdan 10px masofaga, y="10" esa yuqori chetdan 10px masofaga joylashtiradi)
• rx va ry atributlari to‘rtburchak burchaklarining radiusini belgilaydi
• fill atributi to‘rtburchakning to‘ldirish rangini belgilaydi

Chegarali to‘rtburchak

Keling, bir nechta yangi atributlarni o‘z ichiga olgan yana bir misolni ko‘rib chiqamiz:

SVG kodi quyidagicha:

Kod izohi:

• style atributi to‘rtburchak uchun CSS xususiyatlarini belgilashda ishlatiladi
• CSS fill xususiyati to‘rtburchakning to‘ldirish rangini belgilaydi
• CSS stroke-width xususiyati to‘rtburchak chegarasining qalinligini belgilaydi
• CSS stroke xususiyati to‘rtburchak chegarasining rangini belgilaydi

Yarim shaffof to‘rtburchak

Keling, bir nechta yangi atributlarni o‘z ichiga olgan yana bir misolni ko‘rib chiqamiz:

SVG kodi quyidagicha:

Kod izohi:

• CSS fill-opacity xususiyati to‘ldirish rangining shaffoflik darajasini (opacity) belgilaydi (ruxsat etilgan oraliq: 0 dan 1 gacha)
• CSS stroke-opacity xususiyati kontur (stroke) rangining shaffoflik darajasini belgilaydi (ruxsat etilgan oraliq: 0 dan 1 gacha)

Yana bir yarim shaffof to‘rtburchak

Butun element uchun shaffoflik darajasini belgilang:

SVG kodi quyidagicha:

Kod izohi:

• CSS opacity xususiyati butun element uchun shaffoflik darajasini belgilaydi (ruxsat etilgan oraliq: 0 dan 1 gacha)

Burchaklari yumaloqlangan to‘rtburchak

So‘nggi misol — burchaklari yumaloqlangan to‘rtburchak yarating:

SVG kodi quyidagicha:

Kod izohi:

• rx va ry atributlari to‘rtburchak burchaklarini yumaloqlaydi