Каков наилучший подход для масштабирования SVG? Шкала преобразования или окно просмотра?

Я создал код для увеличения области SVG, когда я дважды щелкнул по области. Я использовал атрибут scale scale, чтобы достичь этого, умножая текущую шкалу на коэффициент (например, 1.2, чтобы дать 20% масштабирования).

Я могу сделать то же самое действие по атрибуту viewbox 2-го и 3-го параметров. Уменьшение их приведет к увеличению элементов области и наоборот.

Любые наблюдения за плюсами и минусами этих двух разных подходов?

Ответы

Ответ 1

Я думаю, что viewbox на самом деле будет быстрее в реальном мире, а метка производительности указывает противоположную информацию.

Некоторое время науки:

Я создал jsPerf: http://jsperf.com/transform-scale-vs-viewbox-scale

jsPerf, кажется, дает мне неправильные цифры, как долго проходили тесты, поэтому искажая результаты, но это очень точно: код для теста преобразования короче, имеет 0 строковых манипуляций и работает больше раз за меньшее время.

  • Масштаб преобразования: выполняется в 150 тыс. раз
  • Модификация ViewBox: 90 тыс. раз

Ясно, что масштаб преобразования выполняется быстрее. Код выглядит быстрее, тест прерывается, но наблюдение за прогонами показывает больше прогонов для преобразования. Тем не менее, я все еще чувствую, что viewbox быстрее в реальном мире.

Почему?

  • В любом случае я хочу сохранить отдельный объект, указывающий текущее состояние моего окна просмотра. Этот отдельный объект полезен для обновления слайдера диапазона или некоторого индикатора текущего уровня масштабирования. Запись в окно просмотра легко после вычисления этого.
  • Панорамирование еще нужно коснуться DOM.
  • Часто при масштабировании вам также нужно панорамировать для повторного использования, что означает, что вам все равно нужно возиться с viewbox.
  • Это не повлияет на производительность, поскольку вы можете выполнять так много операций в секунду.

Заключение: компьютеры бывают быстрыми; использовать viewbox; его меньшая работа; оптимизация здесь, вероятно, не даст вам огромных успехов в производительности.