Оптимизация SVG viewBox Анимация в Firefox

Question

Я разрабатываю библиотеку javascript, я выбрал svg для этой цели. Крайне важно время от времени менять viewBox, чтобы пользователи могли видеть все части диаграммы.

Я использовал snap.svg для анимации моего атрибута viewBox, и это как-то гладко, но не удовлетворяет.

Интересно, есть ли другие методы для улучшения рендеринга svg, например, с использованием графического процессора или чего-то еще?

https://jsfiddle.net/omidh/uwc0y524/1/

Наиболее вялым, когда все Viewbox атрибуты меняются сразу, во всяком случае, чтобы улучшить это? Мой svg содержит только <line> и

Редактировать: он намного более гладкий в хроме, чем firefox, поэтому хром в порядке.

Edit: Даже Internet Explorer лучше, чем светлячок

Answer 1

Проблема не метод анимации, но SVG Рендер производительности в Firefox.

Раньше я использовал два <line> на «х» в моем svg. Поэтому, чтобы уменьшить количество объектов, я сменил его на один <polyline>, который дал мне 10% -20% ускорение рендеринга.