SVG <polygon>
Polygon 来自希腊语。 "Poly" 意思是 "许多"，"gon" 意思是 "角"。
SVG 多边形 - <polygon>
The <polygon> 元素用于创建至少具有三个边的图形。
多边形由直线组成，形状是 "封闭" 的（它会自动将最后一个点与第一个点连接起来）。
The <polygon> 元素有一个基本属性，用于定义多边形的点
| 属性 | 描述 |
|---|---|
| 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>
自己尝试 »
代码解释
- The
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>
自己尝试 »
代码解释
- The
fill-rule属性定义了用于指定形状内部部分的算法
