SVG嵌入网页的几种方式

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

一,使用embed标签

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

二,使用object标签

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

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

转载于:https://www.cnblogs.com/yu-tang/p/11459056.html

你可能感兴趣的:(SVG嵌入网页的几种方式)