继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

svg使用小计

零基础h5前端入门培训
关注TA
已关注
手记 301
粉丝 37
获赞 253

上回书说到把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的一些个人的粗浅的使用了


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP