学习 SVG（一）—— 形状，笔画与填充

[ajccom]

学习 SVG（一）—— 形状，笔画与填充

一直对 SVG 很有兴趣，所以最近买了本书在看，写点内容以志查阅。

SVG 中的形状元素

形状	示例	描述
直线	<line x1="x1" y1="y1" x2="x2" y2="y2" />	从起始点 (x1, y1) 画一条线到 (x2, y2)
矩形	<rect x="x" y="y" width="w" height="h" />	从 (x, y) 为左上角画一个宽为 w，高为 h 的矩形
圆	<circle cx="x" cy="y" r="r" />	以 (x, y) 为圆心画一个 r 为半径的圆
椭圆	<ellipse cx="x" cy="y" rx="r1" ry="r2" />	以 (x, y) 为圆心画一个 x 方向半径为 r1，y 方向半径为 r2 的椭圆
多边形	<polygon points="x1 y1 x2 y2 ..." />	画一个以一系列坐标点为顶点的多边形，坐标点不可添加长度单位
折线	<polyline points="x1 y1 x2 y2 ..." />	画一条以一系列坐标点为端点的折线，坐标点不可添加长度单位

笔画	描述
stroke	笔画颜色，默认 none
stroke-width	笔画宽度，默认 1
stroke-opacity	笔画的不透明度，取值 0 到 1 之间
stroke-dasharray	用一系列的数字表示虚线和间隙的长度，默认 none
stroke-linecap	线段头尾形状，值有 butt（默认），round，square
stroke-linejoin	线段连接处形状，值有 miter（默认），round，bevel
stroke-miterlimit	相交处显示宽度与线宽的最大比例，默认 4

填充	描述
fill	指定填充颜色
fill-opacity	填充色的不透明度，取值 0 到 1 之间
fill-rule	值为 nonzero（默认）或 evenodd，用于判断一个区域是否在图形内部的方法

扩展阅读

stroke-dasharray

以前我们在提到使用虚线制作描边动画的时候有提过 stroke-dasharray，这里我再做点补充。

stroke-dasharray 的值是一系列数字，代表了虚线长度与间隙长度。当数字个数为奇数时， SVG 会将其重复一次以使总数达到偶数。

<svg width="200px" height="100px" viewBox="0 0 200 100">
   <!-- nine-pixel dash, five-pixel gap -->
   <line x1="10" y1="10" x2="100" y2="10"
       style="stroke-dasharray: 9, 5;
       stroke: black; stroke-width: 2;"/>

   <!-- five-pixel dash, three-pixel gap, nine-pixel dash, two-pixel gap -->
   <line x1="10" y1="20" x2="100" y2="20"
       style="stroke-dasharray: 5, 3, 9, 2;
       stroke: black; stroke-width: 2;"/>

   <!-- Odd number of entries is duplicated; this is equivalent to:
        nine-pixel dash, three-pixel gap,  five-pixel dash,
        nine-pixel gap,  three-pixel dash, five-pixel gap -->
   <line x1="10" y1="30" x2="100" y2="30"
       style="stroke-dasharray: 9, 3, 5;
       stroke: black; stroke-width: 2;"/>
</svg>

上面的例子中，第三个线段的 stroke-dasharray 设置了 9, 3, 5 这 3 个数字，而显示效果是以
9, 3, 5, 9, 3, 5 的规则做重复，即 9 像素的虚线，3 像素的间隙，5 像素的虚线，9 像素的间隙，3 像素的虚线，5 像素的间隙。

查看 DEMO

fill-rule

fill-rule 属性具有两个值，一个是 nonzero，一个是 evenodd。

nonzero

nonzero 全称 non zero winding number rule（非零环绕数规则），它的规则是：由需要判断是否在图形内的区域中的任意一点与图形外的一点相连，形成的线段与图形的路径相交。使用计数器将相交路径的方向加减，从左到右则加 1，从右到左减 1（反之亦可），若最后结果非零，那么此区域就在图形内，需要填充，反之则否。

图片来源：https://www.cs.rit.edu/~icss571/filling/alt_parity.html

evenodd

evenodd 方法规则：由需要判断是否在图形内的区域中的任意一点与图形外的一点相连，形成的线段与图形的路径相交。其相交次数为奇数则认为区域在图形内，反之则否。

Canvas 填充使用的是非零环绕数规则。

参考内容：

• 《精通SVG》
• 《HTML5 Canvas 核心技术》

Thanks

[luqin]

怎么也弄上了SVG呢

[ajccom]

@luqin 一直想系统的学习 SVG 来着，最近正好买了本《精通 SVG》，所以边看边写写。

[luqin]

svg在ie的兼容性太差劲。。。特别是ie9。ie8通过安装svgviewer插件，效果倒是比较完美，但是viewport等很多参数得自己算了。

[ajccom]

@luqin 我还没有好好的做过一个 SVG 项目，以前玩 D3 的时候也只有看着示例中编写 SVG 代码，所以一直觉得有必要学习一下 😄

[luqin]

👍 加油