如何只允许在原始SVG的范围内进行平移

Question

问题：

我想绑定SVG的声像，这样当没有应用缩放时，不能进行平移，但是当你放大时你可以在SVG的范围内平移。

视觉示例：在下图中，中心的缩放视口可以平移到SVG的边缘，但不能再进一步。

然而，这与给出的pan example非常不同，我无法改变它如何改变它以表现如此。你会怎么做？ （我也错过了一个简单的内置方法来做到这一点）？

我试图解决此问题的问题

1. 每个限制设置允许在正确方向上的像素移动。即bottomLimit = 200允许你向上移动200像素。所以在默认缩放时我需要将所有限制设置为0，但是根据浏览器窗口大小，我无法确定如何识别默认缩放，因为realZoom会发生变化。
2. 在可视化示例中，如果我们要将bottomLimit设置为正确绑定SVG，则需要等于x，但我无法弄清楚如何计算x。 （topLimit需要等于y等）。

Answer 1

基于https://jsfiddle.net/930j458h/3/示例：

1. 检查panZoom.getSizes()
的值
2. 弄清楚getSizes().width是整个SVG块的宽度，getSizes().viewBox.width是viewBox的大小。我们对viewBox很感兴趣。
3. 将getSizes().width替换为getSizes().viewBox.width，一切都神奇地起作用

https://jsfiddle.net/930j458h/4/