SVG path (yo‘l)
SVG path (yo‘l) - <path>
<path> elementi yo‘l (path) belgilash uchun ishlatiladi.
Yo‘llar bir nechta to‘g‘ri yoki egri chiziqlarni birlashtirib, oddiy yoki murakkab shakllar yaratish uchun ishlatiladi.
<path> elementida yo‘lning nuqtalarini va uni qanday chizish haqidagi boshqa buyruqlarni belgilaydigan bitta asosiy atribut bor:
| Atribut | Tavsif |
|---|---|
| d | Majburiy. Yo‘lni belgilaydigan buyruqlar to‘plami. Yo‘l ma’lumotlari uchun quyidagi buyruqlar mavjud:
Eslatma: Yuqoridagi barcha buyruqlarni kichik harflar bilan ham yozish mumkin. Katta harf mutlaq pozitsiyalashni, kichik harf esa nisbiy pozitsiyalashni bildiradi. |
Oddiy yo‘l
Quyidagi misolda 150,5 pozitsiyasidan boshlanib, 75,200 pozitsiyasigacha chiziq tortilgan, u yerdan 225,200 gacha chiziq tortilgan va nihoyat 150,5 ga qaytib yopilgan yo‘l belgilanadi:
SVG kodi quyidagicha:
Misol
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg">
<path d="M150 5 L75 200 L225 200 Z"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
O‘zingiz sinab ko‘ring »
Bezier egri chizig‘i
Bezier egri chiziqlari cheksiz masshtablash mumkin bo‘lgan silliq egri chiziqlarni modellashtirish uchun ishlatiladi. Odatda foydalanuvchi ikkita chetki nuqta va bitta yoki ikkita boshqaruv nuqtasini tanlaydi. Bitta boshqaruv nuqtasiga ega Bezier egri chizig‘i kvadratik Bezier egri chizig‘i deb ataladi.
Quyidagi misolda kvadratik Bezier egri chizig‘i yaratiladi; bunda A va C — boshlang‘ich va oxirgi nuqtalar, B esa boshqaruv nuqtasi:
SVG kodi quyidagicha:
Misol
<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">
<!-- Draw the paths -->
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="4"/>
<path id="lineMID" d="M 175 200 l 150 0" stroke="green" stroke-width="4"/>
<path id="lineAC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none"/>
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="4" />
<circle id="pointB" cx="250" cy="50" r="4" />
<circle id="pointC" cx="400" cy="350" r="4" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="green" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
O‘zingiz sinab ko‘ring »
Murakkabmi? HA!!!! Yo‘llarni chizish ancha murakkab bo‘lgani uchun murakkab grafikalar yaratishda SVG muharriridan foydalanish qat’iy tavsiya etiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!