Search code examples
javascripthtmlanimationsvginkscape

Simple SVG drawing for HTML-JavaScript animation

I'm trying to draw a simple battery symbol in SVG which will be animated using HTML/JavaScript:

http://pastebin.com/utM4BTRS

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?

Solution

  • 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.