javascript - SVG 路径的笔画宽度影响 getBoundingClientRect() 导致 Firefox

Question

getBoundingClientRect()当涉及到具有给定笔画宽度的 SVG 路径时，不同浏览器的实现会有所不同， Firefox 等浏览器包括笔画宽度（例如，与 Chrome 不同）。

通过“包括笔画宽度”，我希望边界框包含路径及其笔画，但仅此而已。但是，正如您在这个基本示例中看到的那样，在 Firefox 中，stroke-width 似乎在整个元素周围创建了一个额外的边框，其值是 stroke-width 本身的两倍：

console.log(document.querySelector("path").getBoundingClientRect())

path {
  stroke: black;
  stroke-width: 30px;
}

<svg>
  <path d="M0,20 L300,20"></path>
</svg>

这是上面非常片段的屏幕截图，检查元素：

正如您所看到的，不仅getBoundingClientRect()是开发工具检查器也弄错了边界矩形（420x120而不是300x30。值得一提的是，Chrome 和 Safari 将返回300x0，如第一段所述）。

这是预期的行为吗？