SVG中的过滤器过渡 [英] SVG Filter Transition in Firefox

问题描述

我尝试将图片从50％的灰度过滤器转换为悬停时的无过滤状态。

I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover.

转换在Firefox中不起作用。是否可以仅使用css在Firefox中运行转换？

The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only 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);
}

推荐答案

一个url它不适合转换。 Gecko必须实施 shorthands 部分正在建设的过滤效果规范这个工作。

Because the standard filter syntax is a url it's not amenable to transitioning. Gecko would have to implement the shorthands part of the under construction Filter Effects specification for this to work.

在此期间，你可以使用SVG动画，但不能通过CSS。

In the meantime you could do this using SVG animation but not via CSS only.

这篇关于SVG中的过滤器过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！