SVG <polygon>
SVG Багатокутник - <polygon>
Елемент <polygon> використовується для створення графіки, яка містить принаймні три сторони.
Багатокутники складаються з прямих ліній, а форма є "замкненою" (всі лінії з’єднуються).
Багатокутник (полігон) походить від грец. Polygon - "Poly" означає "багато", а "gon" означає "кут".
Приклад 1
У наступному прикладі створюється багатокутник із трьома сторонами:
Ось код SVG:
Приклад
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Спробуйте самі »
Пояснення прикладу:
- Атрибут points визначає координати x та y для кожного кута багатокутника
Приклад 2
У наступному прикладі створюється багатокутник із чотирма сторонами:
Ось код SVG:
Приклад
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Спробуйте самі »
Приклад 3
Використовуйте елемент <polygon> для створення зірки:
Ось код SVG:
Приклад
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
Спробуйте самі »
Приклад 4
Змініть властивість fill-rule на "evenodd":
Ось код SVG:
Приклад
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Спробуйте самі »
