Odd behaviour of svg.js “animate().move()” in Firefox

Question

I am using svg.js ( Website ) to animate a polygon inside a mask. This works perfectly in Chrome and IE However if I try it in Firefox the animation is broken.

Please have a look at this jsfiddle .

HTML:

<div id="drawing"></div>

JS:

var draw = SVG('drawing');
var rect = draw.rect(1000, 300).fill({ color: '#fff' });
var polygon = draw.polygon('100,260 50,300 150,300').fill('#000');
var mask = draw.mask().add(rect).add(polygon);

var bgrect = draw.rect(1000, 300).fill({ color: '#ff0000' });
bgrect.maskWith(mask);
polygon.animate().move(500,260);

In Chrome and IE the triangle moves 500px along the x-axis, which is what I want. In Firefox, however, it jumps to the upper left corner und animates downwards to its initial position.

Is there a way to make the animation work in Firefox, too? I'm testing in FF 32.0.1 btw.

Answer 1

This bug is fixed in the latest commit ( https://github.com/wout/svg.js/commit/8617a6b5d5ff147718051a7fc582c54f603aa90f ).

Firefox wont calculate a bounding box of elements which are hidden. Since everything in the defs is hidden by definition, Firefox fails when it comes to bbox calculation. However this has been worked around in the named commit.