SVG Pan Zoom：点击时将SVG内组居中至视口问题求助

核心问题分析 #

你之前的代码错误地获取了按钮元素的视口位置，而非SVG内部目标分组的坐标，两者坐标系完全不匹配，导致平移逻辑失效。以下是修正后的实现方案：

修正步骤与代码 #

1. 确保已保存SVG Pan Zoom实例到全局变量（如你的CodePen中的panZoomInstance）
2. 点击按钮时，定位SVG内对应的分组元素，而非按钮本身
3. 使用SVG原生的getBBox()获取分组在SVG本地坐标系的边界（比getBoundingClientRect()更适合SVG场景）
4. 通过插件的getSizes()方法获取当前视口与SVG的尺寸信息
5. 计算分组中心与视口中心的偏移量，调用panTo()完成居中平移

以cat-1按钮为例，修正后的代码：

var button1 = document.getElementById("cat-1")
button1.addEventListener("click", function() {
    // 获取SVG内的目标分组元素
    const targetGroup = document.getElementById("group1");
    // 获取分组在SVG本地坐标系的边界框
    const groupBBox = targetGroup.getBBox();
    // 获取当前视图尺寸信息
    const sizes = panZoomInstance.getSizes();
    
    // 计算分组的中心坐标
    const groupCenterX = groupBBox.x + groupBBox.width / 2;
    const groupCenterY = groupBBox.y + groupBBox.height / 2;
    
    // 计算目标平移点：让分组中心对齐视口中心（panTo会将目标点设为视口左上角）
    const targetPanX = groupCenterX - sizes.viewBox.width / 2;
    const targetPanY = groupCenterY - sizes.viewBox.height / 2;
    
    // 执行平移操作
    panZoomInstance.panTo({x: targetPanX, y: targetPanY});
});

批量处理其他按钮 #

其他分类按钮可复用上述逻辑，仅需修改对应的分组ID（如cat-2对应group2，cat-3对应group3即可）。

关键方法说明 #

• getBBox()：返回SVG元素在本地坐标系的边界，不受当前平移、缩放影响，确保坐标计算准确
• getSizes()：获取插件当前的视图参数，包含视口位置、尺寸及缩放级别
• panTo()：将指定的SVG坐标点设为视口左上角，通过计算偏移量实现分组居中

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