编辑这个页面须要登录或更高权限！

SVG <polygon> 画多边形

polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。 <polygon>元素通常用于绘制具有多个（3个或更多）侧面/边缘的形状。

SVG Polygon画多边形示例

这是一个简单的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>
测试看看 ‹/›

运行效果如下

绘制八边形

这是一个更大的示例-8个边的多边形(八边形):

<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>
测试看看 ‹/›

运行后效果如下:

SVG <path> 路径SVG <polyline> 画曲折线