Firefox中的SVG過濾器轉換

Question

我試圖將圖像從50％灰度過濾器轉換爲懸停時的無過濾狀態。

然而，這個轉換在firefox中不起作用。是否有可能只使用CSS在Firefox中運行？

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: gray alpha(opacity=50); /* IE6-9 */ 
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -moz-transition: all .6s ease; 
    -ms-transition: all .6s ease; 
    transition: all .6s ease; 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */ 
} 
img:hover { 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 

Answer 1

由於標準過濾器語法是一個URL，它不適合過渡。壁虎將不得不執行shorthands部分正在建設中的Filter Effects規範，才能發揮作用。

在此期間，您可以使用SVG動畫來做到這一點，但不能僅通過CSS。