如何使用jQuery为填充设置动画

Question

我正在使用

element.css('fill','#000000');

并且它有效，但现在我想要填充填充因此我写了这个：

$(element).animate({'fill': '#000000'}, 'slow');

但这不起作用，为什么？我想补充一点，我正在研究SVG文件。

Answer 1

将转换指定为CSS的一部分可能比添加另一个js lib简单：

$('#circle').css({fill: "red", transition: "2.0s"});

Answer 2

JQuery不支持SVG元素的动画，也不支持JQuery UI。但是，您可以使用JQuery SVG插件，并执行以下操作。

$('#circle').animate({ svgFill: 'red' }, 4000);

Demo on JSFiddle

Answer 3

您可以考虑使用jQuery-UI。默认情况下，它的.animate（）函数不支持为fill属性设置动画。但是，当它使用jQuery Color Plugin为颜色设置动画时，您可以简单地使用jQuery.Color.hook（）来允许动画其他css属性。请参阅documentation。

jQuery.Color.hook( "fill stroke" );

Demo