对于具有给定笔划宽度的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
,如第一段所述。
这是预期的行为吗?