可缩放矢量图形(SVG):getBBox()在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

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

请注意，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。