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

How to only allow pan within the bounds of the original SVG

问题:

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

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

然而，这与给定的 pan example 有很大不同，我无法解决如何改变它的行为。你会怎么做？ （我是否还缺少一种简单的内置方法来执行此操作）？

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

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

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

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

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