如何为SVG路径中的“填充”设置动画效果？

Question

我有一个SVG路径，就像一个杯子的轮廓，我想知道如何让一个填充物充满水，像蓝色的液体一样慢慢地在杯子里升起来。

所有教程似乎只是动画中风或行而不是如何动画路径里面的内容

这将是很好，如果水在杯的水平可以用一个变量来设置，可以用javascript改变。

任何信息将非常感谢。

Answer 1

用填充和隐形笔画制作路径。它会代表杯子里的水与水的上面。把它放在你的杯子的路径下。然后在几乎空白和满之间进行动画处理。

你可以找到如何让这样的动画在这里：http://fettblog.eu/blog/2013/07/16/basic-svg-path-tweening-with-smil/

Answer 2

见Fill animation sample。

这个SVG动画是用2D关键帧动画编辑器9va-mac制作的。