SVG 多边形

定义和使用

<polygon> 元素用于创建至少包含三个侧面的图形。

多边形是由直线组成的，形状是“封闭的”（所有线都连接起来）。

多边形来自希腊语。 “聚”是指“许多”，“多边形”是指“角度”。

示例

下面的示例创建一个具有三个边的多边形：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 多边形</h1>
  <svg height="210" width="500">
    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  </svg>
</body>
</html>

尝试一下

SVG 代码说明：

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

更多示例

以下示例创建一个具有四个边的多边形：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 多边形</h1>
  <svg height="250" width="500">
    <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
  </svg>
</body>
</html>

尝试一下

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

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 多边形</h1>
  <svg height="250" 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>
</body>
</html>

尝试一下

将 fill-rule 属性更改为 “evenodd”：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 多边形</h1>
  <svg height="250" 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>
</body>
</html>

尝试一下

定义和使用

示例

更多示例

相关页面