Я использую svg.js (Website) для анимации многоугольника внутри маски. Это отлично работает в Chrome и IE. Однако, если я попробую в Firefox, анимация будет нарушена.Нечеткое поведение svg.js "animate(). Move()" в 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 треугольник движется 500px вдоль оси х, которая является то, что я хочу. Однако в Firefox он перескакивает в верхний левый угол и анимирует вниз в исходное положение.
Есть ли способ сделать анимацию в Firefox тоже? Я тестирую в FF 32.0.1 кстати.