CODEWITHSUNDEEP
javascriptjquerysvg
emte
emte

Reputation: 647

How to animate svg stroke color?

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?

Upvotes: 1

Views: 5124

Answers (3)

patb
patb

Reputation: 1816

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.

Upvotes: 0

B. Youcef
B. Youcef

Reputation: 48

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

Upvotes: 0

emte
emte

Reputation: 647

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!

Upvotes: 1

Related Questions