如何在JavaScript中获取包含描边宽度的SVG线条或路径的包围盒？

你遇到的问题核心是：getBBox()的{stroke: true}参数并非标准API，目前主流浏览器均未实现这个非标准选项。标准的getBBox()仅计算元素本身的几何边界（比如你的线条，几何高度就是0），不会包含描边、阴影、滤镜等视觉扩展区域，所以返回高度为0是符合标准行为的。

以下是三种可行的解决方案：

方法1：用getBoundingClientRect()获取渲染边界 #

这个方法会返回元素在视口中的实际渲染范围，自动包含描边、变换等视觉效果：

const line = document.querySelector("svg line");
const renderRect = line.getBoundingClientRect();
console.log({
  x: renderRect.x,
  y: renderRect.y,
  width: renderRect.width,
  height: renderRect.height
});

注意：该方法返回的是基于浏览器视口的坐标，如果SVG存在缩放、平移等变换，需要额外转换为SVG内部坐标。

方法2：手动计算包含描边的包围盒 #

如果需要SVG内部坐标系的包围盒，可以结合基础getBBox()和描边宽度计算：

const line = document.querySelector("svg line");
const baseBBox = line.getBBox();
const computedStyle = getComputedStyle(line);
const strokeHalfWidth = parseFloat(computedStyle.strokeWidth) / 2;

// 描边向元素四周均匀扩展，因此上下左右各增加半份描边宽度
const strokeIncludedBBox = {
  x: baseBBox.x - strokeHalfWidth,
  y: baseBBox.y - strokeHalfWidth,
  width: baseBBox.width + strokeHalfWidth * 2,
  height: baseBBox.height + strokeHalfWidth * 2
};
console.log(strokeIncludedBBox);

此方法适用于无旋转、 skew 等复杂变换的元素，若元素有变换则需额外处理坐标转换。

方法3：临时元素法处理复杂形状/变换 #

针对带旋转、复杂路径的元素，可以通过创建临时容器元素来获取包含描边的包围盒：

const line = document.querySelector("svg line");
const svg = line.ownerSVGElement;
const tempGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");

// 复制原元素的描边样式到临时组
const style = getComputedStyle(line);
tempGroup.style.stroke = style.stroke;
tempGroup.style.strokeWidth = style.strokeWidth;

// 复制原元素到临时组并挂载到SVG
tempGroup.appendChild(line.cloneNode(true));
svg.appendChild(tempGroup);

// 获取包含描边的包围盒
const strokeBBox = tempGroup.getBBox();

// 清理临时元素
svg.removeChild(tempGroup);
console.log(strokeBBox);

这个方法能自动处理元素的变换效果，适合复杂场景。

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