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