SVG 多边形

SVG 多边形 - <polygon>

SVG 多边形 实例 1

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。

polygon来自希腊。 "Poly" 意味 "many" ， "gon" 意味 "angle".

下面是SVG代码：

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。

代码解析：

• points 属性定义多边形每个角的 x 和 y 坐标

SVG 多边形 实例 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>

对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。

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>

对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。

SVG 多边形 实例 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>

对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。

fill-rule 属性

SVG的图形填充规则通过fill-rule属性来指定。

fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。

fill-rule 属性提供两种选项用于指定如何判断图形的“内部”:

nonzero

字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:

SVG 多边形 实例 5

<desc>Example fillrule-nonzero - demonstrates fill-rule:nonzero</desc>

evenodd

字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd 规则:

提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办，因为任意方向的射线都可以，那么只需要简单的选择另一条没有这种特殊情况的射线即可。

SVG 多边形 实例 6

<desc>Example fillrule-evenodd - demonstrates fill-rule:evenodd</desc>