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

时间:2020-08-14 03:44:42

标签: javascript html firefox svg 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>

这是上面非常片段的屏幕快照,用于检查元素:

enter image description here

如您所见,不仅getBoundingClientRect()甚至开发工具检查器都将边界限制错误(420x120而不是300x30。值得一提的是,Chrome和Safari会返回300x0,如第一段所述。

这是预期的行为吗?

0 个答案:

没有答案