SVG元素的边界框在浏览器之间不一致

Question

我注意到浏览器之间的形状边界框之间存在不一致.我做了包含这个的SVG:

<rect x="100" y="100" width="100" height="100" id="rect" fill="gray" stroke="black" stroke-width="2px" />
<path d="M100 100 L100 200 L200 200 L200 100 z" id="path" fill="red" stroke="white" stroke-width="2px"/>

当我试图在Chrome和IE上获得它们的边界框(element.getClientBoundingBox)时,尺寸为w = 100,h = 100且它们的位置为x = 100,两个形状的y = 100.但是在第一个形状的FireFox上,我得到w = 102,h = 102(大小+边框),x = 99,y = 99.在路径上,值更奇怪 - w = 116,h = 116,x = 92,y = 92.

这是一个Firefox错误 - 应该发布到Bugzilla吗？SVG规范是否说明了什么？(我找不到任何与此相关的信息).有没有人知道解决这个问题的方法？特别是路径元素对我来说是不可预测的.

Answer 1

Firefox在边界框中包含笔划.我们要求更改规范以反映这是正确的.

对于路径来说,尺寸太大,因为我们没有很好地计算出描边形状的实际尺寸,因为估计尖形状的大小很复杂.我们使用stroke-miterlimit来给出一个上限,但它并不是那么好.

你可以使用SVG DOM getBBox方法,它排除了形状的笔划,只给你填充尺寸.