使用Snap.svg绘制SVG

     2014年08月19日       磊磊syh       非专业笔记->折腾专栏       snap.svg svg 

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

<html>
    <head>
    <title>SVG Example</title>
    <script type="text/javascript" src='http://www.opstool.com/js/jquery-1.7.2.min.js'></script>
    <script type="text/javascript" src='http://www.opstool.com/js/snap.svg-min.js'></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var paper = Snap("#paper");
            paper.circle(30, 30, 20);
        });
    </script>
    </head>
    <body>
        <svg id='paper' style='width:500px;height:500px;' ></svg>
    </body>
</html>

基本元素

基本元素 作图方法 示例
圆形(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