上回书说到把SVG整个复制粘贴进html的body里，其实也可以粘到div里，随你心情啦

最开始我写了个Java小程序，通过程序将SVG文件的内容嵌进body然后再输出成HTML文件，因为在程序中SVG文件可以像XML文件一样处理，可以取得Node或Element之类的，可以添加属性比如id什么的

总之如果不是我的SVG文件过大，我就手动复制粘贴了。

反正是弄进html的body里了

而且之前我把svg标签设了id为svg，第一层唯一的g标签设了id为g

然后用Snap.svg.js就可以对这个嵌入了svg的html文件为所欲为了（几乎）

可以从以下网址下载，而且还有在线文档，挺好

http://snapsvg.io/

下载下来的包里找到snap.svg.js或snap.svg-min.js，在html页面中引用就行了，而且我习惯用JQuery，所以把这两个引入先

<head><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="snap.svg-min.js"></script></head>

自己再建个total.js（total.js是我自己起的名字）用于对SVG的操作，也引入到html里，省的都写在html页里，因为我用的SVG文件已经太大了（怨念5秒钟）

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="total.js"></script>

这样准备工作就差不太多了吧。

下一步就要说说jquery+snap+svg的一些个人的粗浅的使用了