如何使用 Modernizr 检测是否支持 SVG CSS 背景？答案

【问题标题】：How do I use Modernizr to detect whether if SVG CSS backgrounds are supported?如何使用 Modernizr 检测是否支持 SVG CSS 背景？
【发布时间】：2012-12-19 17:43:35
【问题描述】：

正如问题所说，我如何使用 Modernizr 来检测是否支持 SVG CSS 背景？

.svg #example{} 不是正确的方法，因为不同的浏览器对 svg 文件的支持不同。

例如 Modernizr 报告 SVG 在 Firefox 3.5 中受支持，但不支持 SVG 文件和 CSS 作为背景图像。

【问题讨论】：

标签： css modernizr

【解决方案1】：

纯 CSS 解决方案怎么样？我可以确认这适用于 IE8。

E {
background-image:  url('image.png');
background-image:  none, url('image.svg'), url('image.png');
background-size: 100% 100%;
}

http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

或者试试这个其他方法：

E {
background: transparent url(fallback-image.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(vector-image.svg);
}

http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

【讨论】：

第一种方法的问题（如您链接的帖子中所述）是 svg 不能有透明背景，否则 png 后备将显示出来。

【解决方案2】：

一种选择是在modernizer 中使用Inline SVG 选项。我可以确认这在 FF 3.6.14 中有效。您可以选择“内联 SVG”作为现代化器构建的一部分，并且可以在 CSS 中管理它，例如：

.logo {
    background: url(mahimage.svg);
    ...
}

.no-inlinesvg .logo {
    background: url(mahimage.png);
    ...
}

或在javascript中：

if (Modernizr.inlinesvg) {
    ...
}
else {
    ....
}

【讨论】：