如何只允许在原始 SVG 范围内平移答案

【问题标题】：How to only allow pan within the bounds of the original SVG如何只允许在原始 SVG 范围内平移
【发布时间】：2016-06-30 21:48:49
【问题描述】：

问题：

我想绑定 SVG 的平移，以便在未应用缩放时无法平移，但是当您放大时，您可以在 SVG 的范围内平移。

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

但是，这与给定的pan example 非常不同，我无法研究如何将其更改为这样。你会怎么做？（我是否也错过了一种简单的内置方法）？

我在尝试解决此问题时遇到的问题

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

【问题讨论】：

基于 pan 示例，您应该将 gutterWidth 替换为 SVG 的当前宽度 (getSizes().width * getSizes().realZoom)。高度也是如此。
@bumbu 你能告诉我吗？当我尝试这样做时，排水沟变得如此之大，锅完全破裂jsfiddle.net/930j458h/3（至少我认为这是正在发生的事情）
对不起，我在放假。只需 console.log 所有变量，看看哪些值似乎是错误的。

【解决方案1】：

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

检查panZoom.getSizes()的值
找出getSizes().width是整个SVG块的宽度，getSizes().viewBox.width是viewBox的大小。我们对 viewBox 很感兴趣。
将getSizes().width 替换为getSizes().viewBox.width，一切都会神奇地运行

【讨论】：

如果您的图像填满了视口并且不允许缩小，并且您希望仅在放大并在图像边界内启用平移，那么它是 , gutterWidth = (zoomPan.getSizes().width) , gutterHeight = (zoomPan.getSizes().height)