How to animate svg stroke color?

Question

I have svg picture and I would like to animate stroke color:

I have tried this but nothing happen:

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

It works when I set property directly without animating it:

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

Is it possible to do that?

Answer 1

Solved.

I forgot to add hook to support other css properties:

jQuery.Color.hook( "stroke" );

Then

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

works pretty well!

Answer 2

it also works like this:

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

using svgFill and svgStroke

like in this fiddle using jquery.svg.js and jquery.svganim.js libs

Sources : already answered here

Answer 3

An alternative, quite convenient, is to specify the animation within the CSS, as so:

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

I noticed you cannot use .animate() to change fill color, but .css() with transition works fine for fill color as well.