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

【问题标题】：The bounding box of the SVG elements is not consistent between browsersSVG元素的边界框在浏览器之间不一致
【发布时间】：2012-09-03 12:51:28
【问题描述】：

我注意到浏览器之间的形状边界框不一致。我制作了包含以下内容的 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 规范对此有什么说明吗？（我找不到与此相关的任何信息）。有人知道解决此问题的任何方法吗？特别是路径元素对我来说有点不可预测。

【问题讨论】：

标签： firefox svg cross-browser bounding-box

【解决方案1】：

Firefox 在边框中包含笔画。 We have asked 更改规范以反映这是正确的。

对于路径，尺寸过大是因为我们无法很好地计算描边形状的实际尺寸，因为估计尖形状尺寸的复杂性。我们使用 stroke-miterlimit 来给出一个上限，但不是那么好。

您可以使用 SVG DOM getBBox 方法，该方法不包括形状的笔触，只为您提供填充尺寸。

【讨论】：

感谢您的澄清。有一段时间我虽然这个形状的位置在许多浏览器上是不同的，但现在我明白唯一的区别是 getClientBBox 返回的值？
@robert-longson 现在不是这样了，对吗？今天getClientBoundingBox好像没有包含stroke
@DonBox Firefox 代码在这方面没有改变，它仍然返回笔画。如果您的测试证明并非如此，您可能会在 bugzilla 中提出错误。
@RobertLongson 规格有变化吗？ “我们已询问”链接似乎反应模糊。将两个 API（包括和不包括笔划）放在同一个坐标系中会很好（最好是更精确的 SVG 坐标，可以转换回客户端，或者用于 SVG 和客户端坐标的 API）。 getClientBBox 目前没用，因为跨平台不一致。