zoukankan      html  css  js  c++  java
  • 转载 | SVG向下兼容优雅降级方法

    本文引自:http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/

     

    1.svg image标签降级技术

    <svg width="96" height="96">
      <image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
    </svg>

    如果浏览器支持SVG,则SVG显示;对于不支持的浏览器,例如IE8浏览器,会忽略svg标签的存在,直接渲染image,在其看来,这就是个img标签,于是,图像就以svg.png的形式显示了。

    2.SVG作为background-image
    Modernizr有一个SVG测试,可以判定设备是否支持SVG,于是,我们就可以通过在HTML元素上添加特定的类名(eg. no-svg),做不同的样式控制

    .my-element {
      background-image: url(image.svg);
    }
    .no-svg .my-element {
      background-image: url(image.png);
    }

    另一个方法

    .my-element {
      background-image: url(fallback.png);
      background-image: url(image.svg), none;
    }

    其利用的技术是CSS3多背景,这是一个经验式技术,我们通过各种观察或者积累发现,浏览器只要支持了多背景,几乎无一例外支持SVG. 于是,浏览器认识url(image.svg), none这个多背景声明,就使用SVG,否则,降级使用上面的png背景。

    3.SVG作为<img>

    喜欢这么做:

    <img src="image.svg" onerror="this.src=image.png">

    HTML混杂行为,如果你是个具有分离癖好的人,上面的方法可能会让你揪心,你可以直接Modernizr的JS API,在脚本中判断处理,类似下面:

    if (!Modernizr.svg) {
      $("img[src$='.svg']").attr("src", fallback);
    }

    如果上面代码中的fallback是个URL字符串,你可以把这个字符串放在data-fallback中,然后,你就可以根据你的实际需要,例如,根据后缀做智能判断加载等。

  • 相关阅读:
    【Python学习】URL编码解码&if __name__ == '__main__'
    【Python学习】邮件发送
    【Python学习】网络编程
    【Python学习】接口开发
    【Python学习】操作Sqllite
    【Python学习】操作Mongodb
    【Python学习】操作Redis
    【Python学习】操作Mysql
    jzoj6003
    jzoj5995
  • 原文地址:https://www.cnblogs.com/One-sprite/p/8503582.html
Copyright © 2011-2022 走看看