SVG 多边形 <polygon>

SVG 中的 <polygon> 元素用于绘制多边形，它是 SVG 中常用的基本形状之一。

使用 <polygon> 元素可以创建闭合的多边形，并可以通过设置属性来控制多边形的顶点坐标、填充颜色、边框颜色等。

基本语法

<polygon
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多边形各个顶点的坐标 -->
  fill="fill-color"                <!-- 多边形的填充颜色 -->
  stroke="stroke-color"            <!-- 多边形的边框颜色 -->
  stroke-width="width"             <!-- 多边形的边框宽度 -->
/>

属性解析：

• points 属性定义了多边形各个顶点的坐标，多个顶点的坐标以空格或逗号分隔，并且每对坐标使用逗号分隔。

• fill 属性定义了多边形的填充颜色。

• stroke 属性定义了多边形的边框颜色。

• stroke-width 属性定义了多边形的边框宽度。

以下代码绘制了一个橙色填充、黑色描边、宽度为 2 像素的多边形，其顶点坐标分别为 (100, 10)、(150, 190) 和 (50, 190)，形成一个闭合的三角形。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" fill="orange" stroke="black" stroke-width="2" />
</svg>

实例 1

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成，其形状是"封闭"的（所有的线条连接起来）。

polygon来自希腊。 "Poly" 意味 "many" ， "gon" 意味 "angle".

下面是 SVG 代码：

点击查看： 查看 SVG 文件。

代码解析：

• points 属性定义多边形每个角的 x 和 y 坐标

实例 2

下面的示例创建一个四边的多边形：

下面是 SVG 代码：

点击查看： 查看 SVG 文件。

实例 3

使用 <polygon> 元素创建一个星型:

下面是 SVG 代码：

点击查看： 查看SVG文件。

实例 4

改变 fill-rule 属性为 "evenodd":

下面是 SVG 代码：