2

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

4

1 回答 1

5

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

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

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

于 2012-09-10T16:16:21.497 回答