svg.js“animate().move()”在 Firefox 中的奇怪行为答案

【问题标题】：Odd behaviour of svg.js "animate().move()" in Firefoxsvg.js“animate().move()”在 Firefox 中的奇怪行为
【发布时间】：2014-11-07 13:16:51
【问题描述】：

我正在使用 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 中，三角形沿 x 轴移动 500px，这正是我想要的。然而，在 Firefox 中，它会跳转到左上角并向下动画到其初始位置。

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

【问题讨论】：

标签： javascript firefox cross-browser svg.js

【解决方案1】：

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

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

【讨论】：