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

有没有办法让动画在Firefox中运行？我在FF 32.0.1 btw进行了测试。

Answer 1

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

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

svg.js的错误行为＆＃34; animate（）。move（）＆＃34;在Firefox中

1 个答案: