Firefox不拿起SVG濾鏡去色圖像大拇指

Question

我已經使用了以下SO回答...

https://stackoverflow.com/a/8612047/80969

..to實現降低飽和度大拇指，在那裏他們徘徊，過濾器被刪除，拇指顯示顏色。我已經得到這個在我的開發環境中工作得很好。現在，我已經在生產中的功能，它不工作在Firefox（10）：

http://www.jungledragon.com/video/2

注意到有除了視頻多大拇指，但只有一個是可見的，其他的都只後出現徘徊它。它當然應該始終可見，但在不活躍時不飽和。

在我的搜索找到我的開發和生產設置之間的區別，我讀過請求一個SVG文件（用於過濾器）必須發生在與請求它的頁面相同的域。

在生產中我將訪問www.jungledragon.com

包含參考過濾器的CSS文件在一個單獨的子域託管：static.jungledragon.com。在這個CSS文件中，引用了filters.svg，它位於static.jungledragon.com的同一目錄中。

我認爲，既然CSS和SVG文件都在同一個域和目錄中，就不應該有問題。然後我考慮了請求頁面（不是CSS，但HTML文件）應該與SVG文件位於同一個域中。因此我將CSS文件中的引用調整爲硬編碼的www.jungledragon.com。這也無濟於事。

任何想法爲什麼Firefox不能正確獲取SVG參考？

Answer 1

根據this answer，svg過濾器只適用於xhtml文檔，所以我猜你的本地web服務器正在這樣做，但你的公共的不是。

添加.htaccess文件，內容如下：

RewriteEngine on 
RewriteBase/
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml 
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0 
RewriteCond %{REQUEST_URI} \.html$ 
RewriteCond %{THE_REQUEST} HTTP/1\.1 
RewriteRule .* - [T=application/xhtml+xml] 

此外，您的SVG文件引用丟失http://

section.videopanel .videos li img { 
    -moz-transition: all 0.5s ease 0s; 
    filter: url("http://www.jungledragon.com/css/filters.svg#grayscale"); 
}