如何在FireFox中检测svg路径的实际大小？

Question

我正在尝试使用getBoundingClientRect函数来获得真正的“路径”大小，但在FireFox中我获得了不同的结果

在谷歌浏览器中一切都很好：

1. 100px x 100px
2. 100px x 100px

但是在FireFox中：

1. 104px x 104px
2. 100px x 100px

为什么stroke-width="1"添加了4px？如何在FF中没有空格的情况下获得实际大小？

<div>With stroke-width="1"</div>
<svg width="110" height="110">
  <path stroke-width="1" d="M0 0 L 100 0 L100 100 L 0 100 Z" fill="black" stroke="black"></path>
</svg>
<br>
<br>
<div>With stroke-width="0"</div>
<svg width="110" height="110">
  <path stroke-width="0" d="M0 0 L 100 0 L100 100 L 0 100 Z" fill="black" stroke="black"></path>
</svg>

P.S。 我很想在这条路上添加“文字行”。我使用getBoundingClientRect函数获取路径位置+大小，在这些坐标中创建新的div。

结果：

Answer 1

我为FF制作了解决方案。简单但有效。

last_current.attr('stroke-width',0); // FireFox fix!
let c_pos = last_current[0].getBoundingClientRect();
last_current.attr('stroke-width', 1); // FireFox fix!