这里是顶部测试

SVG嵌入网页的几种方式

Posted on 2019-09-04 15:11  李氏长歌  阅读(9385)  评论(0编辑  收藏  举报

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

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

Copyright © 2024 李氏长歌
Powered by .NET 9.0 on Kubernetes

这里是页脚测试