Snap学习教程一

1、什么是Snap.svg，有什么用？

Snap.svg是一个强大且直观的SVG动画内容操纵API，支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能。Snap.svg创建的目的在于摒弃Flash插件，将Flash的特性带到WEB上。作者就是大名鼎鼎的Dmitry Baranovskiy，他也是Raphaeljs的作者。

这里只做下简介，其实它跟D3使用一样，都是"高级"的JavaScript代码操作SVG。如果之前了解过Raphael.js的人学起snap.svg肯定会有似曾相识的感觉。

2、Snap.svg入门

官网地址：

中文文档传送门： https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.after.php

官方的文档传送门：http://snapsvg.io/docs/#Element

属性介绍文档传送门：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

做一个小Demo感受一下：

1、首先准备一个基本开始骨架，基本的hmtl结构以及引入snapsvg.js这个库。

2、其实它的使用方法跟jQuery差不多，开始之前需要初始化Snap，即使用Snap来制定我们需要操作svg的节点并把它指定给一个变量。我们这里就定义为s。

var s = Snap("#svg");

3、接下来就可以使用Snap提供的各种方法来操作s这个变量，比如圆或者是矩形。

• 圆，创建圆需要三个参数：X(x轴的坐标)，Y(y轴的坐标)，半径。具体可以参考文档circle API

• 矩形，需要四个参数：X，Y，宽，高。文档地址rect API

• 椭圆，需要四个参数：X，Y，horizontal radius(水平方向的半径)，vertical radius(垂直方向的半径)。文档地址ellipse API

 

我们输入下面的js代码：

    //创建床半径为80的圆
    var circle = s.circle(90,120,80);
    // 宽为210de的juxing
    var square = s.rect(210,40,160,160);
    //椭圆
    var ellipse = s.ellipse(460,120,50,80);

还有更多好玩的图形，等你去创造，可以结合文档，快去试试吧！