在Firefox中复制过滤器（色调 - 旋转）？ （动态地）

Question

我有一个有'hue'类的图像：

.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中实现一个新的过滤器并发出拉取请求！