polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。 <polygon>元素通常用于绘制具有多个（3个或更多）侧面/边缘的形状。
这是一个简单的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 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>测试看看 ‹/›
运行后效果如下: