如何在SvgPanZoom加载时设置SVG自定义初始中心？

当然可以实现！SvgPanZoom默认的自动居中逻辑确实会打乱我们的初始位置计划，但我们有两种靠谱的办法来绕过它，直接设置你想要的初始中心：

方法一：初始化时禁用自动居中，直接设置平移位置 #

SvgPanZoom的默认配置里，fit和center这两个参数会自动把SVG适配到视口并居中。我们只需要在初始化时把这两个参数设为false，就能跳过默认的居中步骤，直接用pan()方法设置初始位置。

示例代码：

// 初始化SvgPanZoom，禁用自动适配和居中
const panZoomInstance = svgPanZoom('#your-svg-id', {
  fit: false,
  center: false,
  // 这里可以添加其他你需要的配置，比如zoomEnabled等
});

// 直接设置初始平移坐标
panZoomInstance.pan({x: 200, y: 150}); // 替换成你需要的目标坐标

这种方法的好处是灵活，适合需要动态计算初始位置的场景，比如根据用户之前的浏览记录来恢复视图。

方法二：提前调整SVG的viewBox属性 #

如果你想要静态的初始中心，也可以直接修改SVG本身的viewBox属性，让SvgPanZoom加载时就以你想要的区域作为初始视图。

viewBox的格式是min-x min-y width height，我们只需要调整min-x和min-y的值，让目标中心刚好落在视口的正中央。举个例子：

• 假设你的SVG原始尺寸是1000x800，你想让坐标(300, 250)作为初始中心
• 视口（容器）的尺寸是600x400
• 那么min-x应该是300 - 600/2 = 0，min-y是250 - 400/2 = 50
• 最终把SVG的viewBox改成0 50 600 400

这样当SvgPanZoom加载时，即使使用默认配置，也会直接显示这个viewBox对应的区域，也就是你想要的初始中心位置。

内容的提问来源于stack exchange，提问作者Hirschferkel