SVG ko‘pburchak
"Polygon" so‘zi yunon tilidan olingan. "Poly" — "ko‘p", "gon" esa "burchak" degan ma’noni anglatadi.
SVG ko‘pburchak - <polygon>
<polygon> elementi kamida uchta tomonga ega grafika yaratish uchun ishlatiladi.
Ko‘pburchaklar to‘g‘ri chiziqlardan tashkil topadi va shakl "yopiq" bo‘ladi (oxirgi nuqta avtomatik ravishda birinchi nuqta bilan tutashtiriladi).
<polygon> elementida ko‘pburchak nuqtalarini belgilaydigan bitta asosiy atribut bor:
| Atribut | Tavsif |
|---|---|
| points | Majburiy. Ko‘pburchak nuqtalarining ro‘yxati. Har bir nuqta x koordinata va y koordinataga ega bo‘lishi shart |
Uch tomonli ko‘pburchak
Quyidagi misolda uch tomonli ko‘pburchak yaratiladi:
SVG kodi quyidagicha:
Misol
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
pointsatributi ko‘pburchakning har bir burchagi uchun x va y koordinatalarini belgilaydi
To‘rt tomonli ko‘pburchak
Quyidagi misolda to‘rt tomonli ko‘pburchak yaratiladi:
SVG kodi quyidagicha:
Misol
<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
O‘zingiz sinab ko‘ring »
Olti tomonli ko‘pburchak
Quyidagi misolda olti tomonli ko‘pburchak yaratiladi:
SVG kodi quyidagicha:
Misol
<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">
<polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
O‘zingiz sinab ko‘ring »
Ko‘pburchak shaklidagi yulduz
Yulduz yaratish uchun <polygon> elementidan foydalaning:
SVG kodi quyidagicha:
Misol
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
O‘zingiz sinab ko‘ring »
Ko‘pburchak shaklidagi yana bir yulduz
Shaklning ichki qismini aniqlash uchun fill-rule atributidan foydalaning:
SVG kodi quyidagicha:
Misol
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
fill-ruleatributi shaklning ichki qismini aniqlashda qo‘llaniladigan algoritmni belgilaydi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!