Làm cách nào để sử dụng Modernizr để phát hiện xem liệu nền CSS SVG có được hỗ trợ không?

Question

Câu hỏi đặt ra là làm cách nào để sử dụng Modernizr để phát hiện xem liệu nền CSS SVG có được hỗ trợ không?

.svg #example{} không đúng cách vì các trình duyệt khác nhau có hỗ trợ đa dạng cho tệp svg.

Ví dụ: báo cáo Modernizr SVG được hỗ trợ trong firefox 3.5 tuy nhiên tệp SVG và CSS làm hình nền KHÔNG được hỗ trợ.

Answer 1

Làm thế nào về một giải pháp CSS tinh khiết? Tôi có thể xác nhận điều này làm việc với 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/

Hoặc thử phương pháp khác này:

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

Một lựa chọn là sử dụng Inline SVG tùy chọn trong nhà hiện đại hóa. Tôi có thể xác nhận điều này hoạt động trong FF 3.6.14. Bạn muốn chọn "Inline SVG" như một phần của hiện đại hóa xây dựng của bạn, và có thể quản lý nó trong CSS như:

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

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

hoặc trong javascript như:

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