Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'錯誤分析 - jaxu－IT工程師數位筆記本

文章出處

　　在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'。

文章列表