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> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成,其形状是"封闭"的(所有的线条连接起来)。

Remarkpolygon来自希腊。 "Poly" 意味 "many" , "gon" 意味 "angle".

下面是 SVG 代码:

实例

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>

尝试一下 »

点击查看: 查看 SVG 文件

代码解析:

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

实例 2

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

下面是 SVG 代码:

实例

<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>

尝试一下 »

点击查看: 查看 SVG 文件

实例 3

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

下面是 SVG 代码:

实例

<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>

尝试一下 »

点击查看: 查看SVG文件


实例 4

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

下面是 SVG 代码:

实例

<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

尝试一下 »
点击查看: 查看 SVG 文件