jquery - 在 Firefox 中复制过滤器(色调旋转)？ (动态地)

Question

我有一张图片有这个“色调”类:

.hue {
        -webkit-transition:all 1s ease-in-out; 
     transition:all 1s ease-in-out;

    -webkit-filter: hue-rotate(0deg); 
    filter:hue-rotate(0deg); 
}  

然后我用 jquery 改变这个色调:

$('.hue').css({
        '-webkit-filter'    : 'hue-rotate('+d+'deg)', 
        'filter'            : 'hue-rotate('+d+'deg)'  

});

这在 Chrome 和 Safari (webkit) 中应该发生得很慢。我需要做什么才能让它在 Firefox 中运行？

据我所知，没有 -moz-filter 或 -moz-transition ( source ) 并且 hue-rotate 应该在 FF ( source ) 中工作。

问的问题几乎一样here但答案不适合我，因为像 PaintbrushJS 这样的库有预定义的过滤器，而我需要自己设置色调值。

非常感谢在 FF 中完成此操作的任何帮助或解决方法!

编辑: Pixastic似乎允许设置自定义值，但我无法应用过渡或慢速效果......这是现在的最后一期:)

EDIT2 我设法在 SVG 的帮助下在 FF 上设置了色调(相当丑陋)。如果您将下一行添加到您的 css(在适用于 Chrome 和 Safari 的 -webkit-filter 旁边):

filter:url(file.svg#myFilter)

并创建 file.svg :

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
   <filter id="myFilter">
     <feColorMatrix type="hueRotate" values="140"/>
   </filter>
   <filter id="myFilter2">
     <feColorMatrix type="hueRotate" values="50"/>
   </filter>
</defs>
</svg>

这行得通。无论如何，当尝试像这样动态更改它时它会失败:

$('.hue').css({
    '-webkit-filter'    : 'hue-rotate('+d+'deg)', /* this works */
    'filter'            : 'url(filters.svg#'+myFilterName+')' /* this doesnt */
});

(我可以看到元素发生了变化，但页面变白了)

Answer 1

这是实验性的技术，目前在 FF 中还没有支持。看看 compatibility table ，来自您提供的链接的同一页面。

我建议用 PaintbrushJS 打开一个实现建议或具有您提到的改进的 Pixstatic(Pixstatic 似乎不是开源的，因此您可能必须通过电子邮件与他们联系)。

甚至可以自己在 PaintbrushJS 中实现一个新的过滤器并发出拉取请求!