如何使 SVG 地图可缩放和可滚动？

Question

我正在开发一个主页上带有自定义 SVG 地图的网站。

我已经创建了一个带有交互点（通常的链接标签）的地图，效果很好。但这里的问题是地图很大，需要大于屏幕尺寸，尤其是在小型设备上。

我希望地图可以缩放（不缩放所有页面）并且可以通过拖动鼠标滚动（在桌面上），并且默认情况下它需要居中。

我尝试使用JqueryUI的可拖动方法来实现滚动，并且它可以工作，但是与我用来居中的方法有某种冲突。当我尝试限制可拖动区域时，也绝对卡住了。

这是我的最新示例：https://codepen.io/khomutovspace/pen/jOVzbMe

代码：

$(document).ready(function () {
  var outerContent = $(".map");
  var innerContent = $(".map > svg");

  outerContent.scrollTop((innerContent.height() - outerContent.height()) / 2);
});

$(function () {
  $(".map").draggable();
});

body {
  margin: 0;
}

.content {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 15px;
}

.navigation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.map {
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="navigation">
    <div>
      <a>Title</a>
    </div>
    <div>
      <a>Item 1</a>
      <a>Item 2</a>
      <a>Item 3</a>
    </div>
  </div>
</div>
<div class="map">
  <svg>…
</div>

Answer 1

如果你可以使用 jQuery UI 以外的其他库，你可以试试PanZoom。

  const mapElement = $(".map .svg")[0];
  const panzoom = Panzoom(mapElement, { contain: 'outside', startScale: 1.5 });
  
  mapElement.parentElement.addEventListener('wheel', panzoom.zoomWithWheel);
  mapElement.parentElement.addEventListener('wheel', function (event) {
    if (!event.shiftKey) return;
    panzoom.zoomWithWheel(event);
  })

例如：https://codepen.io/adrienlamotte/pen/bGgPgqj