本文介绍一种基于 SVG viewBox 和 getBBox() 的响应式 Tooltip 定位方案，解决 hover 时 tooltip 偏移异常、无法随目标图标动态居中显示的问题，适用于地图类交互场景。
本文介绍一种基于 svg `viewbox` 和 `getbbox()` 的响应式 tooltip 定位方案，解决 hover 时 tooltip 偏移异常、无法随目标图标动态居中显示的问题，适用于地图类交互场景。
在构建 SVG 交互式地图时，一个常见需求是：当用户悬停在左侧导航列表项或地图上的图标（如带编号的 <g> 元素）时，显示一个 Tooltip，并使其精确居中对齐到当前激活的图标中心位置。但直接使用 getBoundingClientRect() 计算 DOM 坐标常导致定位失准（如 top: 6451px 这类极端值），根本原因在于 SVG 内部坐标系与页面视口坐标系不一致——尤其当 SVG 使用 viewBox 缩放、容器存在滚动或响应式尺寸时，getBoundingClientRect() 返回的是绝对视口像素值，而图标位置实际由 SVG 坐标系统定义。
✅ 正确做法是统一使用 SVG 原生坐标体系进行计算：
-
获取 SVG 的 viewBox 尺寸（而非容器宽高）：
const { width, height } = $svg.prop("viewBox").baseVal;这确保了比例基准与 SVG 内部绘图逻辑一致。
-
获取目标 <g> 元素的边界盒（BBox）：
const { x, y, width: bboxWidth, height: bboxHeight } = $g[0].getBBox();getBBox() 返回相对于 SVG 坐标系的精确矩形（含 x, y, width, height），不受 CSS 变换或缩放影响，是 SVG 元素定位的黄金标准。
-
将 BBox 中心点转换为百分比定位：
Tooltip 的 left 和 top 应基于 SVG 容器宽度/高度的百分比设置，再配合 CSS translate(-50%, -100%) 实现真正居中（即 tooltip 顶部尖角指向图标中心）：#mypopup { position: absolute; translate: -50% -100%; /* 关键：水平居中 + 垂直上偏 */ top: 0; left: 0; }对应 JS 计算：
$popup.css({ left: `${(x + bboxWidth / 2) / width * 100}%`, top: `${(y + bboxHeight / 2) / height * 100}%` });
? 为什么用 (x + width/2)？
getBBox().x 是左上角横坐标，而图标视觉中心通常在其几何中心（即 x + width/2, y + height/2）。若图标为圆形且 cx/cy 已知，也可直接用 cx/cy 替代（更精准），但 getBBox() 更通用，适配任意复杂 <g> 内容。
以下是精简、健壮的完整实现（兼容列表项与 SVG 图标双向联动）：
const $popup = $("#mypopup");
const $svg = $("#map-wrapper svg");
const viewBox = $svg.prop("viewBox").baseVal;
// 统一监听所有可触发 tooltip 的元素（列表项 & SVG 图标）
$("[data-map]").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();
// 清除所有选中态
$("#mapNavigation li[data-map], g[data-map]", $svg).removeClass("selected");
if (ev.type === "mouseenter") {
// 激活对应项
$li.add($g).addClass("selected");
// 获取 SVG 坐标系下的中心点
const bbox = $g[0].getBBox();
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;
// 转换为百分比并定位 tooltip
$popup
.show()
.text(desc)
.css({
left: `${(centerX / viewBox.width) * 100}%`,
top: `${(centerY / viewBox.height) * 100}%`
});
} else {
$popup.hide().text("");
}
});? 关键注意事项：
- ✅ 必须为 #mypopup 设置 position: absolute 且父容器 #map-wrapper 为 position: relative，否则百分比定位失效；
- ✅ translate: -50% -100% 是实现“tooltip 尖角指向图标中心”的核心，不可省略；
- ⚠️ 避免混用 getBoundingClientRect() 与 getBBox() —— 前者用于 HTML 元素，后者专为 SVG 设计；
- ✅ 简化 HTML 结构：统一用 data-map 属性关联列表与 SVG 元素，删除冗余 ID/class，提升可维护性；
- ? 该方案天然支持响应式：viewBox 比例恒定，百分比定位自动适配任何容器尺寸。
通过此方法，Tooltip 不仅能精准锚定每个图标中心，还能在窗口缩放、滚动、移动端等场景下保持稳定定位，彻底告别 top: 6451px 这类异常偏移问题。
