SVG <polygon>
Polygon 来自希腊语。"Poly" 意为 "许多"，"gon" 意为 "角度"。
SVG 多边形 - <polygon>
SVG <polygon> 元素用于创建至少包含三条边的图形。
多边形由直线组成，并且形状是 "闭合的"（它会自动将最后一个点与第一个点连接起来）。
<polygon> 元素有一个基本属性，用于定义多边形的点。
| Attribute | 描述 |
|---|---|
| points | 必需。多边形点的列表。每个点必须包含一个 x 坐标和一个 y 坐标。 |
三边多边形
以下示例创建一个三边多边形。
这是 SVG 代码
示例
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
自己动手试一试 »
代码解释
points属性定义了多边形每个角的 x 和 y 坐标。
四边多边形
以下示例创建一个四边多边形。
这是 SVG 代码
示例
<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
自己动手试一试 »
六边多边形
以下示例创建一个六边多边形。
这是 SVG 代码
示例
<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">
<polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
自己动手试一试 »
多边形星形
使用 <polygon> 元素创建星形。
这是 SVG 代码
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
自己动手试一试 »
另一个多边形星形
使用 fill-rule 属性来指定形状的内部部分。
这是 SVG 代码
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
自己动手试一试 »
代码解释
fill-rule属性定义了用于指定形状内部部分的算法。
