9.10 SVG 多边形(polygon)

预定义的形状元素 - 多边形

polygon 标签

polygon 标签用来创建至少3条边的图形。闭合的折线(polyline)可以构成一个多边形。

Polygon一词源自希腊,“Poly”代表“多个”,“gon”代表“角”,合起来就是具备多个顶点的几何形状。

例子1 - 三角形

代码如下:

代码解释如下:

  • 和polyline语法类似,points 属性定义了多边形的各个顶点的位置
  • 每个顶点的位置以 x,y 坐标的格式定义,点与点之间以空格隔开

例子2 - 五角星

顾名思义,五角星需要使用5个顶点数据,然后5个顶点相隔互连而成,几何绘制方法如下图所示:

代码如下:

例子3 - 空心五角星

把填充规则fill-rule修改为evenodd,代码如下:

evenodd所声明的填充方式为“奇偶型”,这是一种在复杂路径中判断一个点是否在图形内部的有效方法(射线法)。 其实现步骤为:在复杂路径之外选择一个点,将其和需要判断的点连成线段,如果这条线段和各个路径的交点数目为奇数,这表示这个点在内部;偶数则表示在外部。 “evenodd”方式只填充奇数块,这样路径中间就会出现空白区域。

比如上图中的中心区域的点按照射线法判断都是在五角星路径外部,所以没有被填充。