如何爲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製作的。