SVG <многоугольник>
Полигон SVG — <полигон>
Элемент <polygon> используется для создания изображения, состоящего как минимум из трех сторон.
Многоугольники состоят из прямых линий, а форма «замкнута» (все линии соединяются).
Многоугольник происходит от греческого. «Поли» означает «много», а «гон» означает «угол».
Пример 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
Измените свойство правила заполнения на «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>