如何动画svg笔画颜色？

Question

我有svg图片，我想为笔触颜色设置动画：

我试过这个但没有发生任何事情：

$(".svg-path").animate('stroke','blue')

当我直接设置属性而不设置动​​画时，它可以工作：

$(".svg-path").attr('stroke','blue')

有可能吗？

Answer 1

解决。

我忘了添加hook以支持其他css属性：

jQuery.Color.hook( "stroke" );

然后

 $(".svg-path").animate({
    'stroke': 'blue'
 }, 200);

效果很好！

Answer 2

它也是这样的：

$(".svgpath").animate({
    'stroke-width':'10',
    svgFill: 'red',
    svgStroke: 'green'
  }, 5000);

使用 svgFill 和 svgStroke

喜欢这个fiddle使用 jquery.svg.js 和 jquery.svganim.js libs

来源：已经回答here

Answer 3

另一种非常方便的方法是在CSS中指定动画，如下所示：

$(".svg-path").css({'stroke': 'blue', transition: "0.2s"});

我注意到您无法使用.animate()更改填充色，但.css() transition也适用于填充色。