SVG textPath
SVG matn - <textPath>
<textPath> elementi matnni yo‘l (path) shakli bo‘ylab chizish (render qilish) uchun ishlatiladi.
<textPath> elementida oltita asosiy atribut bor:
| Atribut | Tavsif |
|---|---|
| href | Matn bo‘ylab chiziladigan yo‘lning URL manzili |
| lengthAdjust | textLength atributi belgilagan kenglikka sig‘ishi uchun matnni qanday siqish yoki cho‘zish kerakligi. Qiymati spacing|spacingAndGlyphs bo‘lishi mumkin. Standart qiymat — spacing |
| method | Gliflarni yo‘l bo‘ylab qanday chizish kerakligi. Qiymati align|stretch bo‘lishi mumkin. Standart qiymat — align |
| spacing | Gliflar orasidagi masofa. Qiymati auto|exact bo‘lishi mumkin. Standart qiymat — exact |
| startOffset | Matn boshlanishi yo‘l boshidan qancha masofaga siljitilishi kerakligi. Uzunlik, foiz yoki son bo‘lishi mumkin |
| textLength | Yo‘l bo‘ylab joylashgan matnning kengligi. Uzunlik, foiz yoki son bo‘lishi mumkin. Standart qiymat — auto |
Yo‘l bo‘ylab matn
<textPath> elementini <text> elementi ichida ishlatish:
SVG kodi quyidagicha:
Misol
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
</text>
</svg>
O‘zingiz sinab ko‘ring »
Yo‘l bo‘ylab matn 2
Bu yerda matn kengligini yo‘lning 100% iga teng qilib belgilash uchun textLength atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" textLength="100%" startOffset="20">I love SVG! I love SVG!</textPath>
</text>
</svg>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!