可缩放矢量图形（SVG）：getBBox（）在 Internet Explorer 10 中不起作用答案

【问题标题】：Scalable Vector Graphics(SVG): getBBox() not working in internet explorer 10可缩放矢量图形（SVG）：getBBox（）在 Internet Explorer 10 中不起作用
【发布时间】：2013-05-25 20:37:38
【问题描述】：

我正在使用代码获取边界框的宽度：

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

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

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

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

【问题讨论】：

你的小提琴有错误，你没有定义svgns。修复了该错误后，不幸的是，我只能确认我的 IE10 安装似乎没有报告包含 <text> 的 <g>s 的正确边界框。但是，要求文本元素本身的边界框似乎可以按预期工作。也许这可以为您提供解决方法？
实际上我在 IE9+ 上使用 .getBBox 运行应用程序，所有计算似乎都运行良好。

标签： svg width internet-explorer-10

【解决方案1】：

引用自 this thread 中的规范，我认为是这样的

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

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

因此，解决方法是边走边寻找最大的孩子。在您的特定情况下，作为一种解决方法，您可以在将 lastChild 添加到 g 标签时获取它。将小提琴中的 JS 代码更改为此（我也修复了 Thomas W 在 cmets 中提到的 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 中更改的最后一行，现在应该像Firefox 和你的其他浏览器那样提醒8 而不是0。

【讨论】：