Я пишу кроссплатформенное веб-приложение, которое отображает информацию с использованием SVG. Мне нужен мультисенсорный интерфейс для панорамирования и масштабирования SVG-графики. Из моего исследования выяснилось, что Hammer.js - мой лучший подход, и я использую версию библиотеки jQuery.

Я могу панорамировать и масштабировать изображение с помощью свойства viewBox SVG. Проблема, с которой я сталкиваюсь, заключается в использовании информации о центральной точке во время масштабирования (по сравнению с масштабированием из верхнего левого угла). Эта центральная точка, где бы она ни находилась на моем изображении, должна оставаться в центре щепотки. Ясно, что решение состоит в том, чтобы изменить первые две части viewBox, но у меня возникают проблемы с определением правильных значений. Центральная точка (event.gesture.center), по-видимому, находится в координатах страницы браузера, поэтому мне нужно выяснить, как надежно масштабировать ее, а затем рассчитать координаты viewBox x и y. Я искал примеры, но не смог найти ничего, что было бы связано.

Является ли использование атрибута viewBox лучшим способом масштабирования изображений SVG? Есть ли лучшие альтернативы? У кого-нибудь есть пример кода увеличения изображения SVG из центра пинча?

Кроме того, я замечаю, что, хотя я связываю обработку событий с элементом SVG, жест пинча, кажется, работает из любой точки страницы. Это не браузерная обработка пинча по умолчанию, потому что он только масштабирует изображение SVG, используя мой код. Вот код, который я использую для привязки события пинч:

$(window.demoData.svgElement).hammer().on("pinch", function (event) {
    event.preventDefault();
    ...
});

Спасибо за любую помощь по этим двум вопросам.