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

【问题标题】：Simple SVG drawing for HTML-JavaScript animation用于 HTML-JavaScript 动画的简单 SVG 绘图
【发布时间】：2011-06-15 09:42:32
【问题描述】：

我正在尝试在 SVG 中绘制一个简单的电池符号，它将使用 HTML/JavaScript 进行动画处理：

我想在 SVG 内的“电池电量”绘图上动态操作遮罩，但遮罩未显示为在 Inkscape 中绘制。 Firefox 和 Webkit 都只显示了该部分的一小部分（还没有涉及 JavaScript）：

http://tinypic.com/view.php?pic=deu44m&s=7（左侧为 Inkscape 绘制，右侧为 Firefox 渲染）

由于我是 SVG 新手：这里有什么问题？

【问题讨论】：

【解决方案1】：

除非您需要在蒙版中使用例如渐变，否则您应该尝试使用剪辑路径。其实，如果你能完全去掉面具的使用，那就更好了。

现在，要回答您的问题，您可以从掩码元素中删除 maskUnits="userSpaceOnUse"，它会起作用。此外，您应该在导出时从 inkscape 中另存为“Plain SVG”，这会使 svg 输出看起来更干净。

【讨论】：