在html页面中嵌入SVG的几种方式-创新互联
之前写到过 http://shuxiayeshou.blog.51cto.com/4452347/1759972
成都创新互联长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为罗江企业提供专业的成都做网站、成都网站建设、成都外贸网站建设,罗江网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。今天整理一下,因为又有新的方法可用
首先还是说说老的
1. embed标签
2. object标签
3. iframe
4. 直接嵌入
其中svg标签内容就是svg文件内容,直接copy paste过来的
5.JQuery的load()或ajax
比如我们要将svg文件装载到
中
当前文章:在html页面中嵌入SVG的几种方式-创新互联
当前URL:http://pwwzsj.com/article/ceogos.html
用load的话就要在js里写
$("#div").load("xxx.svg");
ajax就要这样写
$.ajax({ url:"xxx.svg", type:"get", dataType:"html", success:function(data){ $("#div").html(data); } });
用jquery的这两种加载有个缺点,就是会有跨域问题,经实验,在ie11没事儿,chrome会报错
6.svgweb
此项目中会有一个叫svg.js的javascript文件,在html页中引入
然后在页面中用
当然
这样做有个好处,可以兼容低版本浏览器,而且不影响js与svg交互
因为之前用第4种方法嵌入的,在ie9下显示不出来
但现在用第6种方法就OK了,至于更低的IE8之类的没有测试
还有一点要特别注意,不论是第4种还是第6种方法,在html最上面一定要有
这样ie9下才能不出显示问题
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
当前文章:在html页面中嵌入SVG的几种方式-创新互联
当前URL:http://pwwzsj.com/article/ceogos.html