当前位置 : 主页 > 网页制作 > html >

SVG嵌入网页的几种方式

来源:互联网 收集:自由互联 发布时间:2021-06-12
SVG是一种矢量图,放大缩小皆不会失真。这种矢量图,可以用作标签或者用作一些具有交互效果的图片。我们使用SVG作为网页的一部分的时候,有如下几种方法: 一,使用embed标签 em

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

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

网友评论