{"title": "\u4f7f\u7528Snap.svg\u7ed8\u5236SVG", "update_time": "2014-08-19 21:37:50", "tags": "svg snap.svg", "pid": "311", "icon": "default.png"}
## Snap.svg介绍 Snap.svg 项目地址,http://snapsvg.io/ 。这个是Adobe公司主导的开源项目。 SVG是一个Web标准,从某种意义上将,SVG和Flash存在竞争关系. Adobe公司现在开始推行SVG,可以看出SVG技术的重要性开始凸显,未来可能是Web绘图、动画的主流。 说了一些废话,Svg鄙人也是刚开始学习,SVG的作图方式让我感到非常舒服,SVG的元素可以当成DOM来操作。 下面是我学习SVG的一些笔记,希望对看官有些帮助。 ### SVG既然是个标准,那Snap.svg是什么? SVG是Web标准,Snap.svg是一个用于在HTML前端生成SVG的JavaScript工具集; SVG的工具集其实有很多,如svg.js、raphaeljs,离开了这些工具,我们依然可以实现SVG作图,只不过要自己写SVG XML。 ### Snap.svg的缺陷 Snap.svg里应用了一些SVG的高级特性,对于低端的浏览器比如IE6 可能支持不是很好. 但大部分的浏览器Chrome、FireFox、Safari或IE 9+;如果看官考虑的是作图的兼容性,可以考虑http://raphaeljs.com/ . 这个svg工具的作者和Snap.svg 是同一个。所以抉择就是一个舍得的问题,需自行权衡。 ## SVG基本图形绘制 ### 完整HTML示例 使用Snap.svg做SVG图,需要引用2个JS库,一个是jqeury,另外一个当然是snap.svg;另外还要创建一个svg的html元素。 完整的示例如下:之后的元素绘制主要是js相关的代码,不包含完整的html ```
SVG Example
``` ### 基本元素 | 基本元素 | 作图方法 | 示例 | |----------|----------|-------| | 圆形(circle) | paper.circle(x坐标, y坐标, 半径);| paper.circle(30, 30, 20); | | 椭圆(ellipse) | paper.ellipse(x, y, rx水平, ry垂直) | paper.ellipse(50, 50, 40, 20); | | 矩形(rect) |paper.rect(x,y,width,height,[rx],[ry]) rx和ry表示圆角 | paper.rect(50, 50, 100, 200) | | 线(line) | paper.line(x1, y1, x2, y2) | paper.line(50, 50, 100, 200); | | 折线 (polyline) | paper.polyline(x1,y1,x2,y2,x3,y3...) 参数是数组 | paper.polyline(10, 10, 100, 100); | | 多边形 (polygon) | paper.polygon(x1,y1,x2,y2,x3,y3...) 参数是数组 | paper.polygon(22,10,30,81,57,25); | | 路径 (path) | paper.path(路径字符串),下面会做说明 | paper.path("M10 10L180 90") | ### 关于路径(PATH) PATH是SVG的标准元素,PATH是个神奇的元素 ``` M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath ``` ## 参考资料 * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial * http://tutorials.jenkov.com/svg/path-element.html#path-example