温馨提示×

在html页面中嵌入SVG的几种方式

发布时间:2020-08-07 04:29:37 来源:网络 阅读:3017 作者:lreach 栏目:开发技术

之前写到过 http://shuxiayeshou.blog.51cto.com/4452347/1759972

今天整理一下,因为又有新的方法可用


首先还是说说老的


1. embed标签

<embed src="xxx.svg" type="p_w_picpath/svg+xml"/>


2. object标签

<object data="xxx.svg" type="p_w_picpath/svg+xml"/>


3. iframe

<iframe src="xxx.svg"></iframe>


4. 直接嵌入

<body>
<div>
<svg>....</svg>
</div>
</body>

其中svg标签内容就是svg文件内容,直接copy paste过来的


5.JQuery的load()或ajax

比如我们要将svg文件装载到<div>中

<div id="div"></div>

用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页中引入

<script type="text/javascript" src="svg.js"></script>


然后在页面中用<script>标签嵌入svg文件

<script type="p_w_picpath/svg+xml">
<svg>......</svg>
</script>

当然<svg>标签及其内容就是你要嵌入的svg文件的整个内容,copy paste

这样做有个好处,可以兼容低版本浏览器,而且不影响js与svg交互

因为之前用第4种方法嵌入的,在ie9下显示不出来

但现在用第6种方法就OK了,至于更低的IE8之类的没有测试


还有一点要特别注意,不论是第4种还是第6种方法,在html最上面一定要有

<!DOCTYPE html>


这样ie9下才能不出显示问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

主题地图