MixerOID MixerOID - 26 days ago 8
Javascript Question

How to detect real size of svg path in FireFox?

I'm trying to get real "path" size, using

getBoundingClientRect
function for that, but in FireFox I get different results

In Google Chrome all is well:

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


But in FireFox:

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


Why
stroke-width="1"
added 4px? How to get real size without empty spaces in FF?

enter image description here



<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.
I'm triyng to add "line with text" to this path. I get path position+size with
getBoundingClientRect
function, create new div in those coordinates.

Result:

enter image description here

Answer

I made solution for FF. Simple but it works.

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