Error : NS_ERROR_FAILURE in firefox while use getBBox()

Question

I want to use method getBBox() for getting width and height of element created in SVG

here I provide my code which gives result in chrome but not firefox

Please help me how to solve it..

try {
  console.log(document.getElementById("rect1").getBBox());
  console.log(document.getElementById("rect2").getBBox());
} catch (e) {
  console.log(e);
}

svg {
  border: 1px dashed blue;
}

#rect2 {
  display: none;
}

<svg width="300" height="200" style="border:1px dashed blue">
    <rect id="rect1" width="50" height="50" fill="steelblue"></rect>
    <rect id="rect2" width="50" height="50" fill="blue" x="100"></rect>
</svg>

Answer 1

It is because by using display: none the SVG is not rendered. You should use in your CSS visibility: hidden or check the rect style in JS before invoke getBBox().

console.log(document.getElementById("rect1").getBBox());
console.log(document.getElementById("rect2").getBBox());

svg {
  border: 1px dashed blue;
}

#rect2 {
  visibility: hidden;
}

<svg width="300" height="200" style="border:1px dashed blue">
    <rect id="rect1" width="50" height="50" fill="steelblue"></rect>
    <rect id="rect2" width="50" height="50" fill="blue" x="100"></rect>
</svg>

Answer 2

I had this error and there was nothing hidden, turns out that FF throw exception from getBBox if width and height is 0. If you have generic code and you by chance get element that don't have width or height you need to filter those elements out in FF.