javascript - svg.js "animate().move()"在 Firefox 中的奇怪行为

Question

我正在使用 svg.js ( Website ) 为蒙版内的多边形设置动画。这在 Chrome 和 IE 中完美运行，但是如果我在 Firefox 中尝试，动画就会损坏。

请看看这个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);

在 Chrome 和 IE 中，三 Angular 形沿 x 轴移动 500px，这就是我想要的。然而，在 Firefox 中，它会跳到左上角并向下动画到其初始位置。

有没有办法让动画在 Firefox 中也能工作？顺便说一句，我正在 FF 32.0.1 中进行测试。

Answer 1

此错误已在最新提交 ( https://github.com/wout/svg.js/commit/8617a6b5d5ff147718051a7fc582c54f603aa90f ) 中修复。

Firefox 不会计算隐藏元素的边界框。由于 defs 中的所有内容按照定义都是隐藏的，因此 Firefox 在 bbox 计算方面会失败。不过，这已在命名提交中得到解决。