如何获取SVG中变换后<g>元素的包围盒与位置？

你完全不用遍历所有子元素来计算——SVG提供了现成的API组合来搞定这个问题，咱们一步步来拆解：

首先，为啥你直接访问g.x会报错？因为<g>是逻辑容器元素，它本身没有x、y这类几何属性，只有transform属性用来定义变换，所以直接拿这些属性肯定会抛出undefined错误。

而你用getBBox()拿到的是<g>自身坐标系下的包围盒（也就是没应用transform之前的原始范围），这就是为啥结果和预期不符。

正确的解决方法：结合getBBox()和getCTM() #

getCTM()会返回元素当前的变换矩阵（包含自身及所有父元素的变换），我们可以用它把getBBox()得到的原始包围盒转换为最终的变换后范围。

完整代码示例：

const g = document.getElementById("g");
const svg = g.ownerSVGElement;
const o = document.getElementById("o");

// 1. 获取<g>自身坐标系下的包围盒（未应用变换）
const originalBBox = g.getBBox();

// 2. 获取<g>的当前变换矩阵
const ctm = g.getCTM();

// 3. 创建包围盒的四个顶点，并应用变换矩阵
const createTransformedPoint = (x, y) => {
  const point = svg.createSVGPoint();
  point.x = x;
  point.y = y;
  return point.matrixTransform(ctm);
};

const topLeft = createTransformedPoint(originalBBox.x, originalBBox.y);
const topRight = createTransformedPoint(originalBBox.x + originalBBox.width, originalBBox.y);
const bottomRight = createTransformedPoint(originalBBox.x + originalBBox.width, originalBBox.y + originalBBox.height);
const bottomLeft = createTransformedPoint(originalBBox.x, originalBBox.y + originalBBox.height);

// 4. 计算变换后的包围盒范围和中心
const minX = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
const minY = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
const maxX = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
const maxY = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);

const transformedBBox = {
  x: minX,
  y: minY,
  width: maxX - minX,
  height: maxY - minY,
  centerX: (minX + maxX) / 2,
  centerY: (minY + maxY) / 2
};

// 输出结果
o.textContent += `变换后group的x: ${transformedBBox.x}\n`;
o.textContent += `变换后group的y: ${transformedBBox.y}\n`;
o.textContent += `变换后group的宽度: ${transformedBBox.width}\n`;
o.textContent += `变换后group的高度: ${transformedBBox.height}\n`;
o.textContent += `变换后group的中心X: ${transformedBBox.centerX}\n`;
o.textContent += `变换后group的中心Y: ${transformedBBox.centerY}\n`;

对应的SVG和HTML部分：

<style>
  svg{background-color:#f3f3f3}
</style>
<svg viewBox="0 0 200 200" width="200">
  <g id="g" transform="translate(100,100)" >
    <rect id="r" width="100" height="100" ></rect>
  </g>
</svg>
<div id="o"></div>

另一种快速方法：getBoundingClientRect() #

如果你只需要元素相对于浏览器视口的位置和尺寸，可以直接用getBoundingClientRect()，它会自动考虑所有变换：

const viewportRect = g.getBoundingClientRect();
o.textContent += `视口下group的左边界: ${viewportRect.left}\n`;
o.textContent += `视口下group的上边界: ${viewportRect.top}\n`;
o.textContent += `视口下group的宽度: ${viewportRect.width}\n`;
o.textContent += `视口下group的高度: ${viewportRect.height}\n`;

如果需要把这个视口坐标转换为SVG的用户坐标系，可以用getScreenCTM().inverse()做逆变换：

const svgPoint = svg.createSVGPoint();
svgPoint.x = viewportRect.left;
svgPoint.y = viewportRect.top;
const svgCoords = svgPoint.matrixTransform(svg.getScreenCTM().inverse());
o.textContent += `SVG坐标系下group的x: ${svgCoords.x}\n`;
o.textContent += `SVG坐标系下group的y: ${svgCoords.y}\n`;

总结 #

• 不用遍历子元素，getBBox()已经包含了<g>所有子元素的原始包围盒
• 结合getCTM()可以将原始包围盒转换为变换后的最终范围
• getBoundingClientRect()适合快速获取视口相关的位置尺寸

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