Firefox의 SVG 필터 전환

Question

이미지를 50 % 그레이 스케일 필터에서 마우스 오버시 필터리스 상태로 전환하려고합니다.

그러나 전환은 파이어 폭스에서는 작동하지 않습니다. 가능한 CSS를 사용하여 파이어 폭스에서 실행 전환을 얻을 수 있습니까?

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이므로 전환하기가 쉽지 않습니다. Gecko는이 작업을 위해 shorthands 구성 중 Filter Effects 사양을 구현해야합니다.

그동안 SVG 애니메이션을 사용했지만 CSS를 통해서만이 작업을 수행 할 수있었습니다.