上回书说到把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的一些个人的粗浅的使用了
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦