SVG多边形

<polygon>元素用来绘制多边形图形，比如三角形，四边形，五边形等。

多边形是直线围成的图形。

多边形的英文单词是Polygon，来自希腊，”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>

代码说明：

• 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>

代码说明：

• fill-rule属性的取值可以是nonzero | evenodd | inherit

例 4

使用fill-rule: 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>