Scalable Vector Graphics(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

正如this thread中的规范所引用的，我认为是这样的

请注意，getBBox必须返回调用方法时的实际边界框，即使元素尚未呈现。

“即使在元素还没有被渲染的情况下”似乎是IE的症结所在，这个问题在一年后的IE11上仍然存在。根据我的经验，我能看到的唯一的另一种可能性是，根据规范，g标签没有明确的宽度和高度，IE可能会完全放弃这个检查，因为在“没有宽度”中，IE代码库的宽度大概与0相同。

因此，解决方法是在您进行的过程中查找最大的孩子。在您的特殊情况下，作为一种变通方法，您可以在将lastChild添加到g标记时获取它。将小提琴中的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);

正如你所看到的，这是我在getBBox()之前在lastChild中推入的最后一行代码，现在应该警告8而不是像火狐和其他浏览器那样警告0。