Estou escrevendo um aplicativo da web de plataforma cruzada que exibe informações usando SVG. Eu preciso ter uma interface multi-touch para deslocar e ampliar o gráfico SVG. Da minha pesquisa, parece que Hammer.js é a minha melhor abordagem, e estou usando a versão da biblioteca jQuery.

Eu sou capaz de deslocar e ampliar a imagem usando a propriedade viewBox do SVG. O problema que estou tendo é usar a informação de ponto central durante o zoom de pinça (vs. dimensionamento do canto superior esquerdo). Esse ponto central, onde quer que esteja na minha imagem, deve permanecer no centro da pitada. Claramente, a solução é modificar as duas primeiras partes do viewBox, mas estou tendo problemas para determinar os valores corretos. O ponto central (event.gesture.center) parece estar nas coordenadas da página do navegador, portanto, preciso descobrir como escalar isso de forma confiável e, em seguida, calcular as coordenadas x e y da viewBox. Eu procurei exemplos, mas não consegui encontrar nada que fosse bem relacionado.

Está usando o atributo viewBox a melhor maneira de escalar imagens SVG? Existem alternativas melhores? Alguém tem código de exemplo de zoom de uma imagem SVG a partir do centro da pinça?

Além disso, estou percebendo que, embora eu esteja vinculando a manipulação de eventos ao elemento SVG, o gesto de pinça parece funcionar de qualquer lugar na página. Não é o manuseio padrão do navegador do pinch, pois é apenas o zoom da imagem SVG usando o meu código. Aqui está o código que estou usando para vincular o evento pinch:

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

Obrigado por qualquer ajuda sobre estas duas questões.