Question

我的代码：

奇异果公司

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

如何为不支持SVG的浏览器制定规则？

通过图书馆Modernizr有一种方法

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
    background-image: url(logo.png);
}

没有这个库有没有办法？

Answer 1

支持svg的浏览器也支持多种背景，因此您可以这样做：

.logo {
  background: url(kiwi.png);
  background: none, url(kiwi.svg);
}

Answer 2

在html文档的末尾加载.js文件（示例failsvg.js）

您的failsvg.js看起来像（yoursvgfile.svg是您的svg文档#loadsvg是您要在html中加载svg的div）

$(function(){

    $("#loadsvg").load('yoursvgfile.svg',function(response){

        $(this).addClass("svgLoaded");

        if(!response){ // Error loading SVG
            $(this).html('Error loading SVG. Be sure you are running from a the http protocol (not locally)');
// or custom addition here
        }

    });
});

并在所有svg相关元素的css中

.svgLoaded #logo {

}

CSS破解no-svg支持浏览器

2 个答案: