SVG多边形 - <多边形>
所述<polygon>元素用于创建包含至少三个侧面的图形。
多边形是由直线,形状"closed" (所有的线连接起来)。
多边形来自希腊语。 "Poly"是指"many"和"gon"手段"angle" 。
例1
下面的示例创建一个具有三个边的多边形:
下面是SVG代码:
例
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
试一试» Code explanation:
- 该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>
试一试» 例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>
试一试» 例4
填充规则属性更改为"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>
试一试»