CODEWITHSUNDEEP
jqueryhtmlcsssvg
Jared
Jared

Reputation: 3892

Using CSS to animate the fill of SVG path elements

I have a JSFiddle here. I have animated the drawing of a path element using walkway.js and it works great, but after the drawing is completed I would like to animate the fill of the svg's path element. I have tried giving the path the following CSS:

path { 
transition: fill 2.0s linear !important;
}

and on the callback function (executed when the .draw() is completed) I change the value of the path's fill by applying the class testClass like so:

.testClass {
    fill:black;
}

This isn't working - the transition is not being applied and when the callback is called it instantly 'flicks' black-- no fade in at all. This same method has worked on plain html elements, not involved with SVGs. I appreciate any help.

Upvotes: 6

Views: 2657

Answers (2)

Leo
Leo

Reputation: 13828

You can't transition fill from nothing to black. Add original fill to path

path { 
    transition: fill 2.0s !important;
    fill: transparent;
}

fiddle

Upvotes: 2

Mark Wade
Mark Wade

Reputation: 527

Give it something to transition from, by adding fill: white to your path.

path {
    fill: white;
    transition: fill 2.0s !important;
    }

http://jsfiddle.net/yh2jzoxa/4/

Upvotes: 5

Related Questions