上回书说到把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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦