SVG嵌入网页的几种方式

SVG是一种矢量图,放大缩小皆不会失真。这种矢量图,可以用作标签或者用作一些具有交互效果图片。我们使用SVG作为网页的一部分的时候,有如下几种方法

一,使用embed标签

<embed src="SVG路径" type="image/svg+xml"/>

二,使用object标签

<object data="SVG路径" type="image/svg+xml"/>

三,使用iframe

<iframe src="SVG路径"></iframe>

四,直接用img引入svg

<img src="SVG路径"/>

五,把svg当作背景,即:用background引入svg

background-image: url("SVG路径");

六,直接嵌入网页

<body>

  <div>

    <svg>....</svg>

  </div>

</body>

七,使用JQuery的load()或ajax加载进来

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

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

1,jQuery的load: 

  用jQuery的load的话就要在js里写

    $("#div").load("xxx.svg");

2,ajax加载就要在js里这样写:

  $.ajax({     

    url:"xxx.svg",    

    type:"get",    

    dataType:"html",    

    success:function(data){         

             $("#div").html(data);     

              }

     });

八,在第四种方法的基础上,为了兼容低版本的浏览器,加入一个svg.js

1,首先用script标签引入svg.js:

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

2,其次直接在div中嵌入svg标签

  <body>

    <div>

      <svg>....</svg>

    </div>

  </body>

这样能有效兼容低版本IE,从IE9开始。

以上是我的查找总结,如果有什么不对的地方,请大家评论,我会及时查看修改

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些