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

我正在一个网站上工作，主页上有一个自定义SVG地图

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

我希望地图是可缩放的（不缩放所有页面）和可滚动的拖动鼠标（在桌面上），它还需要在默认情况下居中

我尝试使用JqueryUI拖拽方法来实现滚动，它是有效的，但与我用于将其居中的方法存在某种冲突。而且当我试图限制可拖动的区域时，也会非常笨拙

以下是我的最新示例：

代码：

$（文档）.ready（函数（）{
var outerContent=$（“.map”）；
var innerContent=$（“.map>svg”）；
outerContent.scrollTop（（innerContent.height（）-outerContent.height（））/2）；
});
$（函数（）{
$（“.map”）.draggable（）；
});
正文{
保证金：0；
}
.内容{
位置：固定；
排名：0；
左：0；
z指数：1；
填充：15px；
}
.导航{
显示：网格；
网格模板列：重复（2，1fr）；
}
.地图{
最小宽度：100vw；
最小高度：100vh；
溢出：隐藏；
}

标题
项目1
项目2
项目3
…
如果可以使用jQuery UI以外的另一个库，可以尝试

constMapElement=$（“.map.svg”）[0]；
const panzoom=panzoom（mapElement，{contain:'outside'，startScale:1.5}）；
mapElement.parentElement.addEventListener（'wheel'，panzoom.zoomWithWheel）；
mapElement.parentElement.addEventListener（'wheel'，函数（事件）{
如果（！event.shiftKey）返回；
panzoom.zoomWithWheel（事件）；
})

例如：
无法检查它能提供的所有功能，但我真的很喜欢你钉的新钢笔示例。非常感谢你的建议！我试过了。我喜欢它的功能。但是有一些问题。问题是它总是试图把地图放在左边或底部，它的大小毫无意义。那么，也许有一种方法可以使它居中？如果可以的话，也许我可以联系你？我的目标是实现一个100%宽度和高度的容器。地图本身就在中间，能够在不改变父容器特征的情况下进行缩放和平移。