最新的Web开发教程
 

SVG <多边形>


SVG多边形 - <多边形>

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

多边形是由直线,形状"closed" (所有的线连接起来)。

多边形来自希腊语。 "Poly"是指"many""gon"手段"angle"


例1

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

对不起,您的浏览器不支持嵌入式SVG。

下面是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代码:

<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代码:

<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代码:

<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>
试一试»