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>

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>

• javascript
• jquery
• svg

3 Answers 3

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>

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.

If you are using html template and css, javascript then , remove class with property display:none above the map class and add some new class.

Next after loading or executing getbox function attach that removed class(having property display: none) through javascript.

it is simple and quick solution.