SVG CSS 배경이 지원되는지 여부를 감지하기 위해 Modernizr을 어떻게 사용합니까?

Question

SVG CSS 배경이 지원되는지 여부를 감지하기 위해 Modernizr을 어떻게 사용합니까?

.svg #example{} 다른 브라우저가 svg 파일에 대해 다양한 지원을하기 때문에 올바른 방법이 아닙니다.

예를 들어 Modernizr은 SVG가 Firefox 3.5에서 지원되지만 SVG 파일과 CSS는 배경 이미지로 지원되지 않는다고보고합니다.

Answer 1

순수 CSS 솔루션은 어떻습니까? IE8에서이 기능이 작동하는지 확인할 수 있습니다.

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

또는이 다른 방법을 시도

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

하나의 옵션은 모더 나이저에서 인라인 SVG 옵션을 사용하는 것입니다. FF 3.6.14에서이 기능이 작동하는지 확인할 수 있습니다.

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

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

나 같은 자바 스크립트

:

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