如何为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制作。