Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'错误分析

在SVG中，我们无法给Text元素设置Width和Height属性，因此无法直接获取Text元素的高和宽。如果想要给Text元素添加背景色，最简单的办法就是在Text元素的下面添加Rect，然后给Rect设置fill属性。如下面的代码：

<rect id="dateRectObj_0" x="1133" y="605" rx="10" ry="10" width="120" height="23" fill="#B57A5A" display="block"/>
<text id="dateObj_0" x="1143" y="625" font-size="20" display="block">2014-09-11</text>

　　显示效果 

　　但是如果Text元素的字体改变了，如何修改Rect元素的Width和Height属性的值呢？一个简单的办法是通过Text元素的getBBox()方法获取高和宽，代码如下：

var textElement = d3.select("#dateObj_0");
var bBox = textElement.getBBox();
d3.select("#dateRectObj_0").attr("width", bBox.width).attr("height", bBox.height);

　　有关d3.js的使用可以查看官网http://d3js.org/. getBBox()方法返回指定元素的最小边界，http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable

　　不过在Firefox浏览器上，该方法偶尔会返回'NS_ERROR_FAILURE'的错误。原因是当目标元素的display属性被设置为'none'时，Firefox认为此时无法获取到元素的边界值（元素没有在浏览器中渲染，因此返回值没有任何意义）。不过经测试IE和Chrome浏览器能正常工作。解决的办法不外乎是在调用该方法前先判断目标元素的display属性是否为'none'。

本文转自Jaxu博客园博客，原文链接：http://www.cnblogs.com/jaxu/p/4193456.html，如需转载请自行联系原作者