如何动画svg笔画颜色？

Question

我有svg图片，我想要动画笔画颜色：

我试过了，但什么也没发生

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

当我直接设置属性而不动它时，它会工作：

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

有可能这样做吗？

Answer 1

解决了。

我忘记添加钩子以支持其他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

就像在这个小提琴中使用jquery.svg.js和jquery.svganim.js库

资料来源:已答复的这里

Answer 3

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

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

我注意到您不能使用.animate()来更改填充颜色，但是.css()与transition一起可以很好地处理填充颜色。