javascript - 错误 : NS_ERROR_FAILURE in firefox while use getBBox()

Question

我想使用方法 getBBox() 获取在 SVG 中创建的元素的宽度和高度

这里我提供了我的代码，它在 chrome 而不是 firefox 中给出了结果

请帮我解决一下..

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

这是因为使用 display: none 不会渲染 SVG。在调用 getBBox() 之前，您应该在 CSS 中使用 visibility: hidden 或检查 JS 中的 rect 样式。

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>