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

Изменим свойство 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>