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

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

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    windows10使用记录
    DevOps理论与实践总结
    工资调整
    Node程序debug小记
    基于游标的分页接口实现
    util.promisify 的那些事儿
    如何编写 Typescript 声明文件
    async语法升级踩坑小记
    使用TS+Sequelize实现更简洁的CRUD
    使用 TypeScript 改造构建工具及测试用例
  • 原文地址:https://www.cnblogs.com/yu-tang/p/11459056.html
Copyright © 2011-2022 走看看