学习 SVG(一)—— 形状,笔画与填充
ajccom opened this issue · 5 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等很多参数得自己算了。
👍 加油