Chuyển đổi bộ lọc SVG trong Firefox

Question

Tôi đang cố chuyển đổi hình ảnh từ bộ lọc tỷ lệ màu xám 50% sang trạng thái không lọc của nó khi di chuột.

Quá trình chuyển đổi không hoạt động trong firefox. Có thể nhận được quá trình chuyển đổi đang chạy trong firefox chỉ bằng css không?

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

Vì cú pháp bộ lọc tiêu chuẩn là url nên không thể chuyển đổi. Gecko sẽ phải triển khai phần shorthands của việc xây dựng theo đặc điểm Filter Effects để làm việc này.

Trong thời gian chờ đợi, bạn có thể thực hiện việc này bằng hoạt ảnh SVG nhưng không chỉ qua CSS.