SVG過濾器，在Firefox中轉換

我正在一個網頁上工作，如果你將鼠標懸停在圖像上，它會變得飽和。它適用於Chrome和IE。但是，我無法在FF中轉換到工作狀態，而且在Opera中也沒有變壞。SVG過濾器，在Firefox中轉換

這裏是我的代碼：

<!DOCTYPE html> 

<head>  
<style type="text/css"> 
    img:hover {   
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */ 
     filter: gray; /* IE */ 
     -moz-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     -webkit-filter: grayscale(1); /* Webkit */} 

    img {   
     -webkit-filter: grayscale(0); 
     -moz-filter: grayscale(0); 
     -o-filter: grayscale(0); 
     filter: none; 
     filter: grayscale(0);} 

    img.transition { 
     -moz-transition: all 0.5s ease-in-out; /* FF */ 
     -o-transition: all 0.5s ease-in-out; /* Opera 10.5 */ 
     -webkit-transition: all 0.5s ease-in-out; /* Webkit */ 
     transition: all 0.5s ease-in-out;} 
</style> 
</head> 

<html> 
<body> 
    <img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" /> 
</body> 
</html>

我見過類似的問題，但我是那種一個初學者，所以答案是有點抽象的;你不必親自給我提供代碼，但指出我可以理解的一個有點詳細的答案。如果有人能幫助我，那會很好。

來源

2013-02-14 quasipsychotic

對不起，看起來這可能在Firefox中。可能的重複這個：http://stackoverflow.com/questions/13757420/svg-filter-transition-in-firefox – 2013-02-14 16:30:34

爲什麼不使用從紅色到灰色的簡單顏色轉換？

來源

2013-02-22 01:56:26

SVG過濾器，在Firefox中轉換

回答

相關問題