用于 HTML-JavaScript 动画的简单 SVG 绘图
我正在尝试在 SVG 中绘制一个简单的电池符号，该符号将使用 HTML/JavaScript 进行动画处理：
我想在 SVG 内的“电池电量”绘图上动态操作遮罩，但遮罩未按 Inkscape 中绘制的方式显示。 Firefox 和 Webkit 都只显示该部分的一小部分（尚未涉及 JavaScript）：
http://tinypic.com/view.php?pic=deu44m&s=7 （Inkscape 绘图在左侧，Firefox 渲染在右侧）
由于我是 SVG 新手：有什么问题 这里？
I'm trying to draw a simple battery symbol in SVG which will be animated using HTML/JavaScript:
I'd like to dynamically manipulate the mask over the "battery level" drawing inside the SVG but the mask is not displayed as drawn in Inkscape. Firefox and Webkit both display only a tiny bit of that part (no JavaScript involved yet):
http://tinypic.com/view.php?pic=deu44m&s=7 (Inkscape drawing on the left, Firefox rendering on the right)
Since I am new to SVG: what's the problem here?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
除非您需要在蒙版中使用渐变，否则您应该尝试使用剪辑路径。其实，如果能完全不戴口罩那就更好了。
现在，要回答您的问题，您可以从 mask 元素中删除
maskUnits="userSpaceOnUse"，它将起作用。另外，导出时您应该从 inkscape 保存为“Plain SVG”，这会使 svg 输出看起来更干净。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.