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>

  显示效果 Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'错误分析

  但是如果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,如需转载请自行联系原作者

上一篇:TableStore多元索路由探微


下一篇:深入浅出TableStore翻页