7

我通过使用代码获得边界框的宽度：

document.getElementById("dataId").getBBox().width;

这将返回带有输入 id 的边界框的宽度。这在所有浏览器（Chrome、firefox21、IE7）中都可以正常工作，但在 IE10 中却不行。在 IE10 中，它返回值 0。

这是我在 jsfiddle 中创建的示例。请检查一下。 http://jsfiddle.net/L82rn/

我很好奇 IE10 和 svg getBBox 方法之间是否存在任何兼容性问题，如果有任何问题，请告诉我。

4

1 回答 1

3

正如这个线程中的规范所引用的那样，我认为是这个

请注意，getBBox 必须在调用该方法时返回实际的边界框，即使元素尚未被渲染也是如此。

“即使在元素尚未渲染的情况下”似乎是 IE 的症结所在，一年后这个问题在 IE11 上仍然存在。根据经验，我可以看到的唯一另一种可能性是，根据规范，g 标签没有明确的宽度和高度，IE 可能只是完全在此检查之前，因为“没有宽度”可能与0 用于 IE 代码库。

因此，解决方法是边走边寻找最大的孩子。在您的特定情况下，作为一种解决方法，您可以在lastChild将其添加到 g 标签时抓住它。将小提琴中的 JS 代码更改为此（我也修复了 svgns 的问题，正如 Thomas W 在评论中提到的那样）。

var temp;
temp = document.createElementNS("http://www.w3.org/2000/svg","text");
temp.appendChild(document.createTextNode(".."));
temp.setAttribute("x",38); 
temp.setAttribute("y",18);
document.getElementById("tata").appendChild(temp);
alert(document.getElementById("tata").lastChild.getBBox().width);

如您所见，这只是我之前更改的最后一行lastChild，getBBox()现在应该像 Firefox 和您的其他浏览器一样提醒 8 而不是 0。

于 2014-08-06T19:50:25.190 回答