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中转换

回答

相关问题