Javascript 使用Hammer.js缩放SVG

我正在编写一个使用SVG显示信息的跨平台web应用程序。我需要一个多点触摸界面来平移和缩放SVG图形。根据我的研究，Hammer.js似乎是我最好的方法，我使用的是jQuery库版本

我能够使用SVG的viewBox属性平移和缩放图像。我遇到的问题是在收缩缩放过程中使用中心点信息（相对于从左上角缩放）。这个中心点，无论它在我的图像中的什么地方，都应该保持在收缩的中心。显然，解决方案是修改viewBox的前两部分，但我在确定正确的值时遇到了困难。中心点（event.signature.center）似乎在浏览器页面坐标中，因此我需要找出如何可靠地缩放它，然后计算viewBox的x和y坐标。我找了一些例子，但找不到任何相关的

使用viewBox属性是缩放SVG图像的最佳方法吗？有更好的选择吗？有没有人有从收缩中心缩放SVG图像的示例代码

另外，我注意到，即使我将事件处理绑定到SVG元素，捏手势似乎在页面上的任何位置都能工作。这不是默认的浏览器处理方式，因为它只是使用我的代码缩放SVG图像。以下是我用于绑定收缩事件的代码：

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

---

感谢您在这两个问题上提供的帮助。

最好的方法是使用svg变换，结合使用“平移”和“缩放”，您可以在图像中心执行缩放。你只需要找出公式。这个例子可以帮助你（它使用css转换，但你明白了）：

我很高兴有人一直在寻找解决这些问题的方法。SVG似乎到目前为止还没有得到足够的重视

几个月来，我一直在寻找解决方案。 首先，移动SVG有三个选项

如您所说，使用viewBox。这是我认为最好的解决方案，如果你想把图像作为一个单一的项目

您可以使用SVG元素的css转换。缺点是这会导致像素化，但意味着您可以使用其他类型元素的解决方案

您可以对svg中的元素或元素组使用svg转换

要回答代码的问题，可以描述如下。 首先，需要使用screenCTM（坐标变换矩阵）将夹点事件中心点从屏幕坐标转换为SVG坐标。如果点具有坐标（x，y），则viewbox的原点需要进行等效于的变换

• 平移（-x，-y）
• 缩放（缩放因子）
• 翻译（x，y）

我在一个叫做hammerjs的库中完成了这项工作，该库运行在hammerjs之上。下面是一个正在运行的示例。我不会给你代码来准确地解决你的问题，因为在你放置“…”的地方有太多的代码，我最后编写了一个viewBox对象来操作。这里是我用来操作它的代码，仅供参考

scale: function(scale, center){
  var boxScale = 1.0/scale;
  center = center || this.center();
  var newMinimal = this.getMinimal().subtract(center).multiply(boxScale).add(center);
  var newMaximal = this.getMaximal().subtract(center).multiply(boxScale).add(center);
  var newViewBox = viewBox(newMinimal, newMaximal, this.getValidator());
  return newViewBox.valid()? newViewBox : null;
}

这种方法并非没有问题。更改viewBox的计算量非常大，除了元素很少的图像外，我不会在手机上享受愉快的滚动体验。如果您对某个操作更改一次视图，它将很好地工作。例如，左右上下键。 我在上述回购协议中探讨了一些其他选择

---

正如我提到的，尝试了很长一段时间。这些都单独使用其中一种方法。要同时获得平滑滚动和无像素化，我认为需要两者的结合。为此，我正在开发另一个库。

有另一个库专门为此任务设计，名为PanZoom。不幸的是，它不能很好地发挥锤子。我用它来放大/缩小SVG文件，取得了巨大的成功

---

我知道这并不能回答您的问题，所以将其作为评论，但我很幸运jQuery PanZoom做了与您所问内容类似的事情。您可能想尝试一下。非常感谢您的评论。我已经确定了我的问题的答案，并计划将其写下来并发布。我现在怀疑，从长远来看，你提到的图书馆对我来说可能会更好。他们的演示在我的手机上运行得很好，但我需要将其在平板电脑上与我的其他解决方案进行比较，以确定哪种解决方案最有效。正如您所说，它似乎完全符合我的要求（在约束元素中缩放和平移SVG）。他们删除了示例文件夹，我修复了链接。不幸的是，它已被搁置。这是我得到的最远的距离