SVG 基础教程

SVG 形状

SVG 滤镜

SVG 渐变

SVG 参考

SVG 多边形 <polygon>


除了矩形、圆和椭圆,你可能还想画六边形、八边形、五角星或者其他封闭图形。<polygon> 元素可以用来画任意封闭图形,这个图形也可以像前面说的那样填充和绘制轮廓。使用时需要为 points 属性指定一系列的 x/y 坐标对,并用逗号或者空格分隔。表示坐标的数字个数必须是偶数。指定坐标时不需要在最后指定返回起始坐标,因为图形是封闭的,会自动回到起始坐标。

属性

属性 说明
points 定义多边形每个角的 x 和 y 坐标,表示坐标的数字个数必须是偶数,并用逗号或者空格分隔
fill 属于 style 属性,图形内部会使用 fill 属性代表的颜色进行填充,如果没有指定 fill 颜色(rgb 值、颜色名或者十六进制值),则会使用黑色填充,也可以指定为 none,即不填充图形内部,保持透明
fill-opacity 属于 style 属性,定义填充颜色透明度(合法的范围是:0 - 1)
fill-rule 用于指定使用哪一种短发去判断画布上的某区域是否属于该图形的“内部”(内部区域将被填充),有效值为 nonzero/evenodd/inherit,默认为 nonzero
stroke 定义图形边框的颜色
stroke-width 定义图形边框的宽度
stroke-opacity 定义轮廓颜色的透明度(合法的范围是:0 - 1)
opacity 定义元素的透明值(合法的范围是:0 - 1)

示例

<svg width="200px" height="200px" viewBox="0 0 200 200">
  <!-- 平行四边形 -->
  <polygon points="15,10  55, 10  45, 20  5, 20"
    style="fill: red; stroke: black;"/>

  <!-- 五角星 -->
  <polygon
    points="35,37.5  37.9,46.1 46.9,46.1  39.7,51.5
      42.3,60.1  35,55  27.7,60.1  30.3,51.5
      23.1,46.1  32.1,46.1"
      style="fill: #ccffcc; stroke: green;"/>

  <!-- 不规则图形 -->
  <polygon
    points="60 60,  65 72,  80 60,  90 90, 72 80, 72 85, 50 95"
    style="fill: yellow; fill-opacity: 0.5; stroke: black;
      stroke-width: 2;"/>
</svg>

效果如下: