SVG 自学微笔记(04) - 绘製多边形、折线

不定更新、可能烂尾XD

学习资源: W3Schools、其他网路资料

SVG : 多边形

(仅列出部分有使用到的属性)

<svg></svg>

height : 整个图形(画布)的原始长度width: 整个图形(画布)的原始宽度

<polygon></polygon> 或 <polygon />

points : 构成多边形的点座标(x1,y1 x2,y2 ...)sroke : 图形外框颜色stroke-width : 图形外框宽度fill : 图形填满颜色fill-opacity : 调整图形填满颜色的透明度stroke-opacity : 调整图形外框颜色的透明度fill-rule : 指定图形需要被填满的区域

範例1

<svg height="210" width="500">    <polygon points="200,200 400,200 300,50" fill="rgb(255, 183, 197)"     stroke="black" stroke-width="2" /></svg>

範例2

<svg height="210" width="500">    <polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 183, 197)"     stroke="black" stroke-width="2" fill-rule="nonzero" /></svg>

範例3

<svg height="210" width="500">    <polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 183, 197)"     stroke="black" stroke-width="2" fill-rule="evenodd" /></svg>

fill-rule

当构成多边形的点所形成的路径有所重叠，就需要特别指定要填满的区域，并将图形拆分成内外区域，图形内填满、图形外则不填满，而fill-rule这个属性就是用来指定如何区分图形内、外区域，可使用的属性值共有2个，分别是nonzero和evenodd。

上面的範例2、3正是使用不同的图形内、外区域判断方法，所以造成截然不同的结果。

nonzero
起始值为0，在区域内任取一点并画出一条无限长的射线(如下图)，若路径方向和射线方向形成的是顺时针方向则+1，反之逆时针方向则-1，最后如果数值是0，则判断该区域为图形外部(不填充)；如果不是0，则判断为图形内部(填充)。

下图区域内蓝点所发出的射线与路径2、5相交，并且射线与路径所形成的方向均为顺时针，所以数值总和为2(非0)，也因此蓝点所在区域被归类在图形内部，会被填入颜色。

evenodd
起始值为0，在区域内任取一点并画出一条无限长的射线(如下图)，射线每和一条路径相交，就将数值+1，最后根据数值作出不同判断，若数值为奇数，则判断区域位于图形内部(填充)；若数值为偶数，则判断区域位于图形外部(不填充)。

下图区域内蓝点所发出的射线恰经过2条路径(数值总和为2，偶数)，故蓝点所在区域被归类在图形外部，不会被填入颜色。

备注 : 图形外部指的是不被包含在完整图形的区域(不须被填充上色)。

SVG : 折线

折线与之前画过的线段有些许不同 :

折线可由複数点连线而成，但线段(Line)只有起始点和终点。折线有fill相关属性，但线段没有。

(仅列出部分有使用到的属性)

<svg></svg>

height : 整个图形(画布)的原始长度width: 整个图形(画布)的原始宽度

<polyline></polyline> 或 <polyline />

points : 构成折线的点座标(x1,y1 x2,y2 ...)sroke : 折线颜色stroke-width : 折线宽度fill : 图形填满颜色fill-opacity : 调整图形填满颜色的透明度stroke-opacity : 调整折线颜色的透明度

範例1

<svg height="210" width="500">    <polyline points="80,10 120,10 120,40 150,40 150,80 200,80"     stroke="black" stroke-width="3" fill="white" stroke-opacity="0.5" /></svg>

範例2

<svg height="210" width="500">    <polyline points="80,10 120,10 120,40 150,40 150,80 200,80"     stroke="black" stroke-width="3" fill="yellow"    fill-opacity="0.5" stroke-opacity="0.5" /></svg>

备注 : 折线的颜色填充範围(图形)为折线本身加上起始点、终点连线所构成的区域。

参考资料

搞懂SVG/Canvas中nonzero和evenodd填充规则