本文介绍如何基于 svg 的 viewbox 和 getbbox() 动态计算 tooltip 位置，使其始终居中对齐到带 data-map 属性的 svg 分组（如地图标记），同时兼容列表项联动高亮与悬停交互。
本文介绍如何基于 svg 的 viewbox 和 getbbox() 动态计算 tooltip 位置，使其始终居中对齐到带 data-map 属性的 svg 分组（如地图标记），同时兼容列表项联动高亮与悬停交互。
在构建交互式 SVG 地图时，一个常见需求是：当用户悬停在左侧导航列表项或地图上的图标（如 <g data-map="restaurant-01">）时，显示一个 tooltip，并精确地定位在对应 SVG 元素的视觉中心。传统使用 getBoundingClientRect() 的方式容易因滚动、缩放、SVG 坐标系与 CSS 布局混用而产生偏移（例如出现 top: 6451px 这类异常值），根本原因在于它返回的是相对于视口的像素坐标，而 SVG 内部使用的是逻辑坐标（由 viewBox 定义）。
✅ 正确解法是统一使用 SVG 的逻辑坐标系进行定位：
- 获取 SVG 的 viewBox 尺寸：通过 $svg.prop("viewBox").baseVal 提取原始宽高（如 1336 × 942）；
- 获取目标 <g> 的边界盒（BBox）：调用 $g[0].getBBox() 获取其在 viewBox 坐标系中的 {x, y, width, height}；
- 转换为百分比定位：将 x 和 y 换算为相对于 SVG 容器宽度/高度的百分比，再结合 CSS translate(-50%, -100%) 实现“以 tooltip 左上角为基准，向左上偏移自身尺寸一半”的居中对齐效果。
以下是精简、健壮的核心实现代码（基于 jQuery）：
const $popup = $("#mypopup");
const $svg = $("#map-wrapper svg");
const $allTargets = $("[data-map]"); // 统一监听所有可触发元素（列表项 + SVG 分组）
$allTargets.on("mouseenter mouseleave", function (ev) {
const id = $(this).data("map");
const $li = $(`#mapNavigation li[data-map="${id}"]`);
const $g = $(`g[data-map="${id}"]`, $svg);
const desc = $li.text();
// 清除所有选中状态
$("[data-map]").removeClass("selected");
$("g[data-map]").removeClass("selected");
if (ev.type === "mouseenter") {
// 同步高亮
$li.add($g).addClass("selected");
// ✅ 关键：基于 viewBox 计算定位
const viewBox = $svg.prop("viewBox").baseVal;
const bbox = $g[0].getBBox(); // 注意：必须用原生 DOM 元素调用
$popup
.show()
.text(desc)
.css({
left: `${bbox.x / viewBox.width * 100}%`,
top: `${bbox.y / viewBox.height * 100}%`
});
} else {
$popup.hide().text("");
}
});配套关键 CSS（确保 tooltip 真正居中于图标中心）：
#mypopup {
position: absolute;
display: none;
width: 200px;
padding: 10px;
background-color: white;
border-radius: 6px;
font-family: Arial, sans-serif;
font-size: 18px;
/* 核心：用 translate 实现精准居中 */
translate: -50% -100%; /* 向左偏移 50% 宽度，向上偏移 100% 高度（即顶部对齐 bbox.y）*/
/* 注意：不要设置 top/right/left/bottom 的固定像素值 */
}⚠️ 重要注意事项：
- getBBox() 返回的是该 <g> 内容的最小包围盒，其 x/y 是相对于 SVG 原点（左上角）的逻辑坐标，天然适配 viewBox；
- 必须使用 $g[0].getBBox()（原生 DOM 方法），而非 $g.get(0).getBBox() 或 jQuery 封装方法；
- translate: -50% -100% 是实现“tooltip 底部尖角指向图标中心”或“tooltip 上沿紧贴图标上方”的关键——若需 tooltip 居中覆盖图标，可改为 translate: -50% -50% 并调整 top/left 为 50%；
- 确保 SVG 容器（#map-wrapper）设置了 position: relative，使 #mypopup 的 position: absolute 相对于它定位；
- 移除冗余 ID/class（如 #restaurant-list-01），统一用语义化 data-map 属性，提升可维护性与扩展性。
此方案彻底规避了滚动偏移、缩放失真、CSS 布局干扰等问题，让 tooltip 在任意分辨率、缩放级别下均能稳定、精准地锚定到 SVG 图标中心，是构建专业级 SVG 交互地图的推荐实践。
