Рисование многоугольника с помощью SVG <polygon>

Элемент <polygon> определяет замкнутую многоугольную форму, состоящую из группы相连的 прямых отрезков, где последняя точка соединяется с первой. Элемент <polygon> обычно используется для рисования фигур с несколькими (три или более) сторонами/гранями.

Пример SVG многоугольника

Это простой пример SVG многоугольника:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="10,0　　60,0　　35,50"
　　　　　　　　　style="stroke:#660000;　fill:#cc3333;"/>
</svg>

Эффект после выполнения:

Вы, возможно, уже заметили, что даже если указаны только 3 точки, все 3 стороны были нарисованы. Это связано с тем, что элемент <polygon> рисует линии между всеми точками, включая линию от последней точки к первой. Элемент <polyline> не рисует линию от последней точки к первой. Это единственное различие между элементами <polygon> и <polyline>.

Рисование шестиугольника

Пример кода如下:

<svg width="120" height="120" viewPort="0　0　120　120" version="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon points="60,20　100,40　100,80　60,100　20,80　20,40"/>　　　　
</svg>

Результат выполнения:

Рисование八角ной фигуры

Это更大的示例-八角形:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="50,5　　　100,5　　125,30　　125,80　100,105"
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
</svg>

Рисование пятиугольника SVG

Пример кода如下:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

Эффект после выполнения: