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

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

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    python3
    hive与hbase集成
    spark读取hbase形成RDD,存入hive或者spark_sql分析
    spark机器学习笔记01
    CodeForces 55D Beautiful numbers
    NOIP 2016 D2T2 蚯蚓](思维)
    SCOI 2009 围豆豆(状压DP)
    POJ 1852 Ants(贪心)
    STA树的深度(树型DP)
    HDU 5963 朋友 (找规律,思维)
  • 原文地址:https://www.cnblogs.com/yu-tang/p/11459056.html
Copyright © 2020-2023  润新知