SVG元素位置计算错误：非viewBox尺寸下定位不准

问题分析 #

当前的定位计算仅考虑了元素相对于父<g>的局部变换，但当SVG因viewBox适配不同屏幕尺寸发生拉伸、缩放时，未将SVG视口到文档坐标的全局变换纳入计算，导致覆盖层位置偏移。另外SVG的堆叠顺序由元素在DOM中的顺序决定，后添加的元素层级更高，小国家上的图标被遮挡本质是图标DOM顺序靠后于其他国家元素。

解决方案 #

1. 修正覆盖层定位逻辑 #

通过获取SVG根元素的完整变换矩阵（包含viewBox缩放、平移等全局变换），结合元素边界框计算出适配所有屏幕尺寸的准确位置。修正后的代码如下：

// 获取SVG根元素、地图组和目标国家组
const svgRoot = document.querySelector('svg');
const parentGroup = document.getElementById('map');
const childGroup = document.getElementById('de');

// 获取目标国家的边界框
const bbox = childGroup.getBBox();

// 计算国家组到SVG根的变换矩阵
const childTransform = childGroup.getCTM();
const svgTransform = svgRoot.getCTM();
const finalTransform = childTransform.multiply(svgTransform.inverse());

// 转换边界框的四个顶点到SVG视口坐标系
const topLeft = new DOMPoint(bbox.x, bbox.y).matrixTransform(finalTransform);
const bottomRight = new DOMPoint(bbox.x + bbox.width, bbox.y + bbox.height).matrixTransform(finalTransform);

// 创建覆盖层矩形
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', topLeft.x);
rect.setAttribute('y', topLeft.y);
rect.setAttribute('width', bottomRight.x - topLeft.x);
rect.setAttribute('height', bottomRight.y - topLeft.y);
rect.setAttribute('fill', 'red');
rect.setAttribute('opacity', '0.35');

// 将覆盖层添加到SVG根的顶层（确保层级在地图之上）
svgRoot.appendChild(rect);

2. 解决图标堆叠遮挡问题 #

• 最优简化方案：创建一个单独的顶层<g id="icon-container">，将所有图标添加到这个组内。只需保证该组在DOM中的位置位于所有国家元素之后，图标就会自然显示在所有国家之上，无需额外覆盖层。
• 结合覆盖层的方案：将图标挂载到修正定位后的覆盖层元素或同层级的<g>中，同时确保这些元素在DOM中的顺序晚于国家元素，维持层级优先级。

关键原理 #

• getCTM()获取元素相对于SVG根的变换矩阵，结合inverse()反转变换后，可实现局部坐标到全局视口坐标的转换。
• DOMPoint.matrixTransform()能将边界框顶点应用变换矩阵，得到适配屏幕缩放后的准确坐标。
• SVG无z-index属性，元素堆叠顺序完全由DOM顺序决定，调整元素在DOM中的位置即可直接控制层级高低。

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