如何使用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

一種選擇是使用在近代化的內嵌SVG選項。我可以在FF 3.6.14中確認這一點。你會選擇「內聯SVG」作爲近代化建設的一部分，並且可以在CSS一樣管理它：

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

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

或像JavaScript：

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