上回书说到把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" src="jquery.js"></script><script type="text/javascript" src="snap.svg-min.js"></script></head>
自己再建个total.js(total.js是我自己起的名字)用于对SVG的操作,也引入到html里,省的都写在html页里,因为我用的SVG文件已经太大了(怨念5秒钟)
<script type="text/javascript" src="total.js"></script>
这样准备工作就差不太多了吧。
下一步就要说说jquery+snap+svg的一些个人的粗浅的使用了