svg - 可缩放矢量图形 (SVG) : getBBox() not working in internet explorer 10

Question

我使用以下代码获取边界框的宽度:

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

这将返回带有输入 id 的边界框的宽度。
这适用于所有浏览器(Chrome、firefox21、IE7)，但不适用于 IE10。
在 IE10 中，它返回给我 0 的值。

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

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

Answer 1

引用自 this thread 中的规范我想是这个

Note that getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered.

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

因此，解决方法是随时寻找最大的 child 。在您的特定情况下，作为一种解决方法，您可以捕获 lastChild当您将其添加到 g 标签时。将 fiddle 中的 JS 代码更改为此(我也修复了 Thomas W 在评论中提到的 svgns 问题)。

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 。