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

我使用的代码得到一个边框的宽度：可伸缩矢量图形（SVG）：getBBox（）无法在Internet Explorer工作10

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

这将返回我的边框的宽度与输入的ID。在所有浏览器（Chrome，firefox21，IE7）中都能正常工作，但在IE10中无法正常工作。在IE10中，它返回的值为0.

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

我很好奇，如果有IE10和SVG getBBox方法之间的任何兼容性问题，请不要让我知道，如果有任何问题，这一点。

来源

2013-05-30 user2435299

你在你的小提琴中有一个错误，你没有定义'svgns'。修正了这个错误后，我不幸地只能确认我安装的IE10似乎没有报告''包含''的正确边界框。但是，询问文本元素本身的边界框似乎按预期工作。也许这可能会为您提供解决方法？ –

其实我已经在IE9 +上运行使用.getBBox的应用程序，并且所有计算似乎都正常。 – BausTheBig

由于从规范中this thread引用我认为这是这个

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

“即使在元素尚未呈现的情况下”似乎是IE的关键点，这个问题在IE11上一年后仍然存在。我唯一能从经验中看到的另一种可能性是，根据规范，g标签没有明确的宽度和高度，IE可能完全是这个检查的前提，因为在“没有宽度”中大概是相同的0代表IE代码库。

因此，解决方法是寻找最大的孩子。在您的特殊情况下，作为解决方法，您可以在将它添加到g标签时抓取lastChild。把小提琴中的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);

正如你可以看到它只是最后一行，我在lastChildgetBBox()一改之前搡，应Firefox和您的其他浏览器没有发出警报的8而不是0了。

来源

2014-08-06 19:50:25

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

回答

相关问题