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

【问题标题】：How to animate a fill with jQuery如何使用 jQuery 为填充设置动画
【发布时间】：2015-09-05 04:40:19
【问题描述】：

我正在使用

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

它可以工作，但现在我想为填充设置动画，所以我写了这个：

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

但这不起作用，为什么？我要补充一下，我正在处理 SVG 文件。

【问题讨论】：

标签： jquery svg

【解决方案1】：

将过渡指定为 CSS 的一部分可能比添加另一个 js 库更简单：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以考虑使用 jQuery-UI。默认情况下，它的 .animate() 函数不支持动画填充属性。但由于它使用 jQuery Color Plugin 为颜色设置动画，因此您可以简单地使用 jQuery.Color.hook() 来允许为其他 css 属性设置动画。见documentation。

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

【讨论】：