学习 SVG（一）—— 形状，笔画与填充
ajccom opened this issue · comments
学习 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 像素的间隙。
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 填充使用的是非零环绕数规则。
参考内容：
Thanks
怎么也弄上了SVG呢
svg在ie的兼容性太差劲。。。特别是ie9。ie8通过安装svgviewer插件，效果倒是比较完美，但是viewport等很多参数得自己算了。
👍 加油