错误:使用getBBox()时，Firefox中出现NS_ERROR_FAILURE [英] Error : NS_ERROR_FAILURE in firefox while use getBBox()

问题描述

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

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

在这里，我提供了我的代码，该代码以chrome而不是Firefox形式提供了结果

here I provide my code which gives result in chrome but not 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>

推荐答案

这是因为通过使用display: none不会呈现SVG.您应该在CSS visibility: hidden中使用它，或者在调用getBBox()之前检查JS中的rect样式.

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>

这篇关于错误:使用getBBox()时，Firefox中出现NS_ERROR_FAILURE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！