SVG 仅在缩放时平移，大于视口答案

【问题标题】：SVG Pan only when zoomed, bigger than viewportSVG 仅在缩放时平移，大于视口
【发布时间】：2023-01-30 04:37:35
【问题描述】：

预期结果：如果 SVG 未缩放且 SVG 保持居中，则无法平移 SVG。缩放时，允许平移到其边界。

问题:

使用此解决方案How to only allow pan within the bounds of the original SVG，它仍然允许您在 SVG 未缩放时进行平移，而在缩放时不允许平移到所有边界

使用此解决方案 How to only allow pan within the bounds of the original SVG，在缩放时平移按预期工作，但当 SVG 未缩放时，一旦我尝试平移它就会向右和底部对齐，而不是保持居中。

let beforePan

beforePan = function (oldPan, newPan) {
  let stopHorizontal = false,
    stopVertical = false,
    gutterWidth = this.getSizes().width,
    gutterHeight = this.getSizes().height,
    // Computed variables
    sizes = this.getSizes(),
    leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth,
    rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom),
    topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight,
    bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

  customPan = {}
  customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
  customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))
  
  return customPan
}

let panZoomController = svgPanZoom('#map', {
  fit: 1,
  center: true,
  minZoom: 1,
  zoomScaleSensitivity: 0.5,
  beforePan: beforePan
});

SVG（地图）位于包装器 div 内的内容 div 内：

.wrapper {
    margin: auto;
}

.content {
    background-color: silver;
    position: absolute;
    inset: 0 0 0 0;
}

#map {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

【问题讨论】：

标签： javascript svg svgpanzoom

【解决方案1】：

几个小时后并尝试仅使用一种计算使其工作，我决定在 SVG 小于视口（不允许平移）时使用不同的计算。代码如下：

beforePan = function (oldPan, newPan) {
  let stopHorizontal = false,
    stopVertical = false,
    sizes = this.getSizes(),
    customPan = {}

  if (sizes.viewBox.width * sizes.realZoom < sizes.width || sizes.viewBox.height * sizes.realZoom < sizes.height) {
    customPan.x = (window.visualViewport.width - (sizes.viewBox.width * sizes.realZoom)) / 2
    customPan.y = (window.visualViewport.height - (sizes.viewBox.height * sizes.realZoom)) / 2
    console.log(sizes.viewBox.width)
  } else {
    let gutterWidth = sizes.width,
    gutterHeight = sizes.height,
    leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth,
    rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom),
    topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight,
    bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

    customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
    customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))
  }

  return customPan
}

【讨论】：