Ich schreibe eine plattformübergreifende Webanwendung, die Informationen mithilfe von SVG anzeigt. Ich benötige eine Multitouch-Oberfläche zum Schwenken und Zoomen der SVG-Grafik. Aus meinen Recherchen geht hervor, dass Hammer.js mein bester Ansatz ist und ich die jQuery-Bibliotheksversion verwende.

Ich kann das Bild mit der viewBox-Eigenschaft der SVG-Datei schwenken und zoomen. Das Problem, das ich habe, ist die Verwendung der Mittelpunktinformationen während des Pinch-Zooms (im Gegensatz zur Skalierung von der oberen linken Ecke). Dieser Mittelpunkt sollte, wo immer er sich in meinem Bild befindet, in der Mitte der Prise bleiben. Die Lösung besteht natürlich darin, die ersten beiden Teile der viewBox zu ändern, aber ich habe Probleme, die richtigen Werte zu ermitteln. Der Mittelpunkt (event.gesture.center) scheint in Browserseitenkoordinaten zu liegen, daher muss ich herausfinden, wie dies zuverlässig skaliert werden kann, und dann die viewBox-X- und -Y-Koordinaten berechnen. Ich habe nach Beispielen gesucht, konnte aber nichts Vergleichbares finden.

Ist die Verwendung des viewBox-Attributs der beste Weg, um SVG-Bilder zu skalieren? Gibt es bessere Alternativen? Hat jemand einen Beispielcode zum Zoomen eines SVG-Bildes aus der Pinch-Mitte?

Außerdem ist mir aufgefallen, dass die Pinch-Geste an einer beliebigen Stelle auf der Seite funktioniert, obwohl ich die Ereignisbehandlung an das SVG-Element binde. Dies ist nicht die standardmäßige Browser-Handhabung der Prise, da nur das SVG-Bild mit meinem Code gezoomt wird. Hier ist der Code, den ich zum Binden des Pinch-Ereignisses verwende:

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

Vielen Dank für jede Hilfe zu diesen beiden Themen.