可伸缩矢量图形（SVG）：在Internet Explorer 10中，getBBox()无法工作

Question

我通过使用以下代码获取边界框的宽度：

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

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

这是我在jsfiddle创建的示例，请检查。 http://jsfiddle.net/L82rn/ 我想知道IE10和svg getBBox方法之间是否存在兼容性问题，请告诉我是否存在任何问题。

- user2435299

---

你的fiddle出现了错误，你没有定义svgns。修复这个错误后，我很遗憾只能确认我的IE10安装似乎不能正确报告包含<text>的<g>的边界框。然而，请求文本元素本身的边界框似乎按预期工作。也许这可以为你提供一个解决方法？ - Thomas W

实际上，我已经在IE9+上运行了使用.getBBox的应用程序，并且所有计算似乎都正常工作。 - roundrobin

Answer 1

从这个线程中引用规范，我认为是这样的：

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

“即使元素尚未呈现”似乎是IE的难点，这个问题在IE11上仍然存在一年后。根据我的经验，我能看到的唯一可能性是，根据规范，g标签没有明确的宽度和高度，IE可能完全放弃了这个检查，因为“没有宽度”可能对于IE代码库来说等同于0。

因此，解决方法就是在进行查找时寻找最大的子元素。在您特定的情况下，可以通过在将其添加到g标记时抓取lastChild来解决问题。将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()之前，现在应该会弹出一个8，而不是像Firefox和其他浏览器一样弹出0。

- Stan Vest