SVG CSS arka planlarının desteklenip desteklenmediğini belirlemek için Modernizr'i nasıl kullanırım?

Question

Soru olarak, SVG CSS arka planlarının desteklenip desteklenmediğini anlamak için Modernizr'i nasıl kullanırım? Farklı tarayıcıların svg dosyaları için çeşitli destekleri olduğundan,

.svg #example{} doğru yol değil. Örneğin, Modernizr, SVG'nin firefox 3.5'de desteklenmesini bildirir, ancak SVG dosyaları ve arka plan görüntüsü olarak CSS desteklenmez.

Answer 1

Saf bir CSS çözümü nasıl? Bu çalışmayı IE8 ile onaylayabilirim.

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

Ya da bu diğer yöntemi deneyin

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

:

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

Bir seçenek çağdaşlaştırıcı içinde satır içi SVG seçeneğini kullanmaktır. Bu çalışmayı FF 3.6.14'te teyit edebilirim.

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

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

ya da benzeri javascript

:

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