SVG路径的笔触宽度会影响Firefox的getBoundingClientRect结果

问题描述

对于具有给定笔划宽度的SVG路径，getBoundingClientRect()的实现因浏览器而异，例如Firefox including the stroke width之类的浏览器（例如，不同于Chrome）。

通过“包括笔划宽度” ，我希望得到的是，边界框包含带有笔划的路径，但没有其他内容。但是，如您在此基本示例中所见，似乎在Firefox中，笔划宽度在整个元素周围创建了一个额外的边框，其值是笔划宽度本身的两倍：

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，如第一段所述。

这是预期的行为吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）