How do I animate a 'fill' in an SVG path?

Question

I have an SVG path which is just like an outline of a cup, and I was wondering how I can animate a fill to fill it up with water like blue liquid that slowly rises up in the cup?

All the tutorials seem to just animate the stroke or the line but not how to animate the content inside the path

It would be nice if the level of water in the cup could be set with a variable that could be changed with javascript.

Any information would be great thanks.

Answer 1

Make path with fill and invisible stroke. It will represent water in cup with upper side of water. Put it under the path of your cup. Then animate it between almost empty and full.

You can find how to make such animation here: http://fettblog.eu/blog/2013/07/16/basic-svg-path-tweening-with-smil/

Answer 2

See Fill animation sample .

This SVG animation is made with 2D key-frame animation editor 9va-mac .