SVG Polygon - <многоугольник>
<polygon> элемент используется для создания графического , который содержит по крайней мере три стороны.
Многоугольники выполнены из прямых линий, а форма "closed" (все линии подсоединить).
Полигон приходит с греческого. "Poly" означает "many" и "gon" средство "angle" .
Пример 1
В следующем примере создается многоугольник с тремя сторонами:
Вот код 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 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>
Попробуй сам "