SVG marker
SVG marker - <marker>
<marker> elementi <line>, <path>, <polyline> yoki <polygon>’ning boshi, o‘rtasi va oxiri uchun marker yaratishda ishlatiladi.
Barcha SVG markerlari <defs> elementi ichida belgilanadi. <defs> elementi "definitions" (ta’riflar) so‘zining qisqartmasi bo‘lib, maxsus elementlar (masalan, markerlar) ta’riflarini o‘z ichiga oladi.
Marker shakllarga
marker-start, marker-mid va
marker-end atributlari yordamida biriktiriladi.
<marker> elementida markerni joylashtirish va uning o‘lchamini belgilash uchun oltita asosiy atribut bor:
| Atribut | Tavsif |
|---|---|
| id | Markerning yagona (unikal) identifikatori |
| markerHeight | Markerning balandligi. Standart qiymat — 3 |
| markerWidth | Markerning kengligi. Standart qiymat — 3 |
| refX | Marker cho‘qqi (vertex) bilan tutashadigan x pozitsiya. Standart qiymat — 0 |
| refY | Marker cho‘qqi (vertex) bilan tutashadigan y pozitsiya. Standart qiymat — 0 |
| orient | Markerning u biriktirilgan shaklga nisbatan yo‘nalishi. Qiymati "auto", "auto-start-reverse" yoki burchak bo‘lishi mumkin. Standart qiymat — 0 |
Boshlang‘ich va oxirgi markerli chiziq
Quyidagi misolda boshida aylana shaklidagi marker, oxirida esa strelka uchi shaklidagi marker bo‘lgan chiziq yaratiladi:
SVG kodi quyidagicha:
Misol
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
</marker>
</defs>
<line x1="10" y1="10" x2="300" y2="200" stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<defs>elementi ikkita markerni o‘z ichiga oladi: bitta#circlemarkeri va bitta#arrowmarkeri- Marker shakli
<marker>elementida belgilanadi - Birinchi
<marker>elementi kichik aylana chizadigan<circle>elementini o‘z ichiga oladi - Ikkinchi
<marker>elementi kichik uchburchak chizadigan<path>elementini o‘z ichiga oladi <line>elementi ikkala markergamarker-startatributi vamarker-endatributi orqali murojaat qiladi
O‘rta marker qo‘shish
Quyidagi misolda boshlang‘ich marker, o‘rta marker va oxirgi markerga ega siniq chiziq yaratiladi:
SVG kodi quyidagicha:
Misol
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="2" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
</marker>
</defs>
<polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3" fill="none" marker-start="url(#circle)" marker-mid="url(#circle)" marker-end="url(#arrow)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<defs>elementi ikkita markerni o‘z ichiga oladi: bitta#circlemarkeri va bitta#arrowmarkeri- Marker shakli
<marker>elementida belgilanadi - Birinchi
<marker>elementi kichik aylana chizadigan<circle>elementini o‘z ichiga oladi - Ikkinchi
<marker>elementi kichik uchburchak chizadigan<path>elementini o‘z ichiga oladi <polyline>elementi ikkala markergamarker-startatributi,marker-midatributi vamarker-endatributi orqali murojaat qiladi- E’tibor bering,
marker-startatributi vamarker-midatributi bir xil markerga (#circle) ishora qiladi. Shu tarzda markerlardan bir necha marta qayta foydalanish mumkin
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!