Простой 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

Если вам не нужно использовать, например, градиенты в маске, вы должны вместо этого использовать клип-путь.На самом деле, если вы можете полностью отказаться от использования маски, это даже лучше.

Теперь, чтобы ответить на ваш вопрос, вы можете удалить maskUnits="userSpaceOnUse" из элемента маски, и он будет работать.Также вы должны сохранить как «Обычный SVG» из inkscape при экспорте, так что вывод svg выглядит чище.