javascript - 用于 HTML-JavaScript 动画的简单 SVG 绘图

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

Unless you need to use e.g gradients in the mask you should try to use clip-path instead. Actually, if you can remove the use of mask completely that's even better.

Now, to answer your question, you can remove maskUnits="userSpaceOnUse" from the mask element and it will work. Also you should save as "Plain SVG" from inkscape when exporting, it makes the svg output look a tad cleaner.