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

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


首先还是说说老的


1. embed标签

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


2. object标签

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


3. iframe

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


4. 直接嵌入

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

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


5.JQuery的load()或ajax

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

<divid="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页中引入

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


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

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

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

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

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

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


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

<!DOCTYPEhtml>


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