在html頁面中嵌入SVG的幾種方式

發(fā)布時(shí)間：2020-08-07 04:29:37 來源：網(wǎng)絡(luò) 閱讀：3104 作者：lreach 欄目：開發(fā)技術(shù)

之前寫到過 http://shuxiayeshou.blog.51cto.com/4452347/1759972

今天整理一下，因?yàn)橛钟行碌姆椒捎?/p>

首先還是說說老的

1. embed標(biāo)簽

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

2. object標(biāo)簽

<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標(biāo)簽內(nèi)容就是svg文件內(nèi)容，直接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的這兩種加載有個(gè)缺點(diǎn)，就是會(huì)有跨域問題，經(jīng)實(shí)驗(yàn)，在ie11沒事兒，chrome會(huì)報(bào)錯(cuò)

6.svgweb

此項(xiàng)目中會(huì)有一個(gè)叫svg.js的javascript文件，在html頁中引入

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

然后在頁面中用<script>標(biāo)簽嵌入svg文件

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

當(dāng)然<svg>標(biāo)簽及其內(nèi)容就是你要嵌入的svg文件的整個(gè)內(nèi)容，copy paste

這樣做有個(gè)好處，可以兼容低版本瀏覽器，而且不影響js與svg交互

因?yàn)橹坝玫?種方法嵌入的，在ie9下顯示不出來

但現(xiàn)在用第6種方法就OK了，至于更低的IE8之類的沒有測試

還有一點(diǎn)要特別注意，不論是第4種還是第6種方法，在html最上面一定要有

<!DOCTYPE html>

這樣ie9下才能不出顯示問題

向AI問一下細(xì)節(jié)

猜你喜歡