微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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开始。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐