Front End

Appearance

SVG polygon元素 ​

SVG<polygon>元素是用来绘制多边形（>=3）。

SVG Polygon教程视频版 ​

下面是本篇教程的视频版：

SVG Polygon示例 ​

这有一个简单的SVG多边形示例：

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

渲染结果：

你可能会注意到，即使只列出了三个点，也绘制出了三条边。这是因为<polygon>元素绘制出了点之间的所有的直线，包括最后一个点到第一个点之间的直线。然而，<polyline>元素不会绘制最后一个点到第一个点之间的线。这也是<polygon>和<polyline>元素之间唯一的不同点。

下面是一个更大的例子——八边形（八角形？）:

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