如何使用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