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。您应该在CSS visibility: hidden中使用或在调用getBBox()之前检查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>

Answer 2

如果您使用的是html模板和CSS，则使用javascript，删除具有属性display：none的类，然后添加一些新类。

下一步，在加载或执行getbox函数后，通过javascript附加已删除的类（具有属性显示：无）。

这是一种简单快捷的解决方案。

错误：使用getBBox（）时firefox中的NS_ERROR_FAILURE

2 个答案: