SVG地图中Tooltip相对选中图标定位问题求助

问题分析 #

你遇到的top值异常（如6451px），大概率是坐标计算时混淆了视口坐标与文档坐标，或是错误获取了非目标元素的边界信息。SVG元素的getBoundingClientRect()返回的是相对于浏览器视口的位置，若不结合页面滚动偏移量，会导致Tooltip定位到超出可视区域的位置。

解决方案 #

1. 正确获取目标元素的边界信息 #

确保你选中的是带selected类的map__plot__item元素，而非整个SVG容器或其他父元素：

const activePlot = document.querySelector('.map__plot__item.selected');
if (!activePlot) return; // 防止无选中元素时报错
const tooltip = document.getElementById('tooltip'); // 替换为你的Tooltip实际ID

2. 计算Tooltip的居中位置 #

结合视口坐标与页面滚动偏移量，计算Tooltip的居中位置：

const plotRect = activePlot.getBoundingClientRect();
// 垂直居中：视口top + 页面滚动距离 + 图标高度一半 - Tooltip高度一半
const tooltipTop = plotRect.top + window.scrollY + (plotRect.height / 2) - (tooltip.offsetHeight / 2);
// 水平居中：视口left + 页面滚动距离 + 图标宽度一半 - Tooltip宽度一半
const tooltipLeft = plotRect.left + window.scrollX + (plotRect.width / 2) - (tooltip.offsetWidth / 2);

3. 设置Tooltip定位样式 #

确保Tooltip使用绝对定位（若父元素为相对定位，需调整计算逻辑）：

tooltip.style.position = 'absolute';
tooltip.style.top = `${tooltipTop}px`;
tooltip.style.left = `${tooltipLeft}px`;
tooltip.style.display = 'block'; // 显示Tooltip

特殊情况处理：父元素为相对定位 #

如果Tooltip的父元素设置了position: relative，则需要将坐标转换为相对于父元素的偏移：

const parentRect = tooltip.parentElement.getBoundingClientRect();
const tooltipTop = (plotRect.top - parentRect.top) + (plotRect.height / 2) - (tooltip.offsetHeight / 2);
const tooltipLeft = (plotRect.left - parentRect.left) + (plotRect.width / 2) - (tooltip.offsetWidth / 2);

关键注意点 #

• 若map__plot__item是SVG内部的<g>或<circle>元素，getBoundingClientRect()能正确返回其在视口中的实际位置，无需额外处理SVG坐标系转换。
• 每次触发Tooltip时都要重新计算位置，避免复用旧的坐标值。

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