SVG <polygon>
SVG Polygon - <polygon>
The <polygon> element is used to create a graphic that contains at least three sides.
Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".
示例 1
The following example creates a polygon with three sides:
以下是 SVG 代码：
例子
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
亲自尝试 »
代码解释：
- The points attribute defines the x and y coordinates for each corner of the polygon
示例 2
The following example creates a polygon with four sides:
以下是 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>
亲自尝试 »
Example 3
Use the <polygon> element to create a star:
以下是 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>
亲自尝试 »
Example 4
Change the fill-rule property to "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>
亲自尝试 »
