🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# SVG &lt;polygon&gt; ## SVG 多边形 - &lt;polygon&gt; ## 实例 1 &lt;polygon&gt; 标签用来创建含有不少于三个边的图形。 多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。 > ![Remark](https://box.kancloud.cn/2015-12-12_566b901025f8f.jpg) > 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图形预览源)。