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

Question

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

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

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

Answer 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

Answer 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 {
    ....
}