簡單SVG繪製的HTML，JavaScript動畫

Question

我試圖繪製SVG簡單的電池符號將使用HTML/JavaScript的動畫效果：

http://pastebin.com/utM4BTRS

我希望動態操縱面具通過SVG內部的「電池電量」繪圖，但屏幕不像Inkscape中顯示的那樣顯示。 Firefox和WebKit的兩個顯示只有部分的一點點（沒有JavaScript的參與還）：

http://tinypic.com/view.php?pic=deu44m&s=7（Inkscape的左側畫，Firefox的渲染右側）

由於我是新來的SVG：什麼是問題在這裏？

Answer 1

除非您需要在遮罩中使用例如漸變，否則應該嘗試使用剪裁路徑。其實，如果你可以完全消除面具的使用，那就更好了。

現在，要回答你的問題，你可以從mask元素中刪除maskUnits="userSpaceOnUse"，它將工作。在導出時，你也應該從inkscape保存爲「Plain SVG」，這使得svg輸出看起來更清晰。