Open ajccom opened 8 years ago
怎么也弄上了SVG呢
@luqin 一直想系统的学习 SVG 来着,最近正好买了本《精通 SVG》,所以边看边写写。
svg在ie的兼容性太差劲。。。特别是ie9。ie8通过安装svgviewer插件,效果倒是比较完美,但是viewport等很多参数得自己算了。
@luqin 我还没有好好的做过一个 SVG 项目,以前玩 D3 的时候也只有看着示例中编写 SVG 代码,所以一直觉得有必要学习一下 :smile:
:+1: 加油
学习 SVG(一)—— 形状,笔画与填充
一直对 SVG 很有兴趣,所以最近买了本书在看,写点内容以志查阅。
SVG 中的形状元素
<line x1="x1" y1="y1" x2="x2" y2="y2" />
<rect x="x" y="y" width="w" height="h" />
<circle cx="x" cy="y" r="r" />
<ellipse cx="x" cy="y" rx="r1" ry="r2" />
<polygon points="x1 y1 x2 y2 ..." />
<polyline points="x1 y1 x2 y2 ..." />
扩展阅读
stroke-dasharray
以前我们在提到使用虚线制作描边动画的时候有提过
stroke-dasharray
,这里我再做点补充。stroke-dasharray
的值是一系列数字,代表了虚线长度与间隙长度。当数字个数为奇数时, 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 填充使用的是非零环绕数规则。
参考内容:
Thanks