在Firefox中的Svg灰度過濾器錯誤

我在我目前正在使用的網站上使用svg過濾器。它應該去除圖像的飽和度，當我懸停時，它們應該恢復到正常的彩色狀態。我使用了一個在線教程，它在Chrome，IE，Safari瀏覽器中效果很好。但是在firefox中，圖像不顯示，只是白色，當你在它們上面盤旋時，它們突然顯示爲彩色狀態。我試圖尋找解決方案，但我發現的唯一類似案例是由於ID錯誤。在Firefox中的Svg灰度過濾器錯誤

我的SVG代碼：

<svg xmlns="http://www.w3.org/2000/svg"> 
<filter id="grayscale"> 
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> 
</filter> 
</svg>

我的CSS代碼：

#thumbnails li img 
{ 
    width: 31%; 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ 
    margin-bottom: 1.3%; 
    margin-top: 1.3%; 
} 

#thumbnails img:hover 
{ 
    filter: none; 
    -webkit-filter: grayscale(0); 
}

控制檯的錯誤，我在Firefox中得到的是：

錯誤在 '過濾器' 的解析值。聲明丟失

如果您需要額外的信息，我很樂意提供。非常感謝。蒂莫西

來源

2012-12-18 Timothy Druyts

以備將來參考（因爲這是一個很老的問題，我不知道，如果OP甚至需要這個了......）

.SVG：

<?xml version="1.0" encoding="UTF-8"?> 
<svg version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg"> 
    <filter id="grayscale"> 
     <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 
              0.3333 0.3333 0.3333 0 0 
              0.3333 0.3333 0.3333 0 0 
              0  0  0  1 0"/> 
    </filter> 
</svg>

CSS：

.YOUR_DIV img { 
    width: 260px; 
    height: 190px; 
    filter: grayscale(100%); /* Current draft standard */ 
    -webkit-filter: grayscale(100%); /* New WebKit */ 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(PATH/TO/SVG/**filter**.svg#grayscale); /* Gecko */ 
    filter: gray; /* IE */ 
    -webkit-filter: grayscale(1); /* Old WebKit */ 
} 

.YOUR_DIV img:hover { 
    filter: none; 
    -webkit-filter: grayscale(0); 
}

*請確保在CSS中更改過濾器的路徑和名稱以匹配您的file.svg和ID。

來源

2013-02-16 12:11:32 David

在Firefox中的Svg灰度過濾器錯誤

回答

相關問題