Последние учебники веб-разработки
 

SVG <Многоугольник>


SVG Polygon - <многоугольник>

<polygon> элемент используется для создания графического , который содержит по крайней мере три стороны.

Многоугольники выполнены из прямых линий, а форма "closed" (все линии подсоединить).

Полигон приходит с греческого. "Poly" означает "many" и "gon" средство "angle" .


Пример 1

В следующем примере создается многоугольник с тремя сторонами:

К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код SVG:

пример

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Попробуй сам "

Code explanation:

  • points атрибут определяет координаты х и у для каждого угла многоугольника

Пример 2

В следующем примере создается многоугольник с четырех сторон:

К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код 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:

пример

<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:

пример

<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>
Попробуй сам "