zoukankan      html  css  js  c++  java
  • 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开始。

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

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    【Python】自己写日志功能
    shell 笔记
    python 字典,字典嵌套,字典遍历
    python基础 循环,列表,切片,列表增删改查
    Dva_react使用问题总结
    ts_react_test报错解决方法
    如何写好项目规划和方案设计文档 (转)
    script标签引入react环境三个必须cdn文件
    react点击事件对象( react封装过后事件对象 )
    react简书笔记一 环境, git 和 项目 关联
  • 原文地址:https://www.cnblogs.com/yu-tang/p/11459056.html
Copyright © 2011-2022 走看看