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>

Попробуйте сами