# SVG &lt;polygon&gt; ## SVG 多边形 - &lt;polygon&gt; ## 实例 1 &lt;polygon&gt; 标签用来创建含有不少于三个边的图形。 多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。 >  > polygon来自希腊。 "Poly" 一位 "many" ， "gon" 意味 "angle". <object height="210" width="500" data="polygon1.svg" type="image/svg+xml"><embed src="images/polygon1.svg" type="image/svg+xml"></object> 下面是SVG代码： ## 实例 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <polygon points="200,10 250,190 160,210"   style="fill:lime;stroke:purple;stroke-width:1"/> </svg> ``` 对于Opera用户： [查看SVG文件](images/polygon1.svg)（右键单击SVG图形预览源）。 **代码解析：** * points 属性定义多边形每个角的 x 和 y 坐标 ## 实例 2 下面的示例创建一个四边的多边形： <object height="250" width="500" data="polygon2.svg" type="image/svg+xml"><embed src="images/polygon2.svg" type="image/svg+xml"></object> 下面是SVG代码： ## 实例 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <polygon points="220,10 300,210 170,250 123,234"   style="fill:lime;stroke:purple;stroke-width:1"/> </svg> ``` 对于Opera用户： [查看SVG文件](images/polygon2.svg)（右键单击SVG图形预览源）。 ## 实例 3 使用 &lt;polygon&gt; 元素创建一个星型: <object height="210" width="500" data="polygon3.svg" type="image/svg+xml"><embed src="images/polygon3.svg" type="image/svg+xml"></object> 下面是SVG代码： ## 实例 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <polygon points="100,10 40,180 190,60 10,60 160,180"   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg> ``` 对于Opera用户： [查看SVG文件](images/polygon3.svg)（右键单击SVG图形预览源）。 ## 实例 4 改变 fill-rule 属性为 "evenodd": <object height="210" width="500" data="polygon4.svg" type="image/svg+xml"><embed src="images/polygon4.svg" type="image/svg+xml"></object> 下面是SVG代码： ## 实例 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <polygon points="100,10 40,180 190,60 10,60 160,180"   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> ``` 对于Opera用户： [查看SVG文件](images/polygon4.svg)（右键单击SVG图形预览源）。