FireFox에서 svg 경로의 실제 크기를 감지하는 방법은 무엇입니까?

Question

나는 그것에 대해 getBoundingClientRect 기능을 사용하여, 실제 "경로"크기를 얻으려고하지만, 파이어 폭스에서 나는 모든 것이 잘 다른 결과

구글 크롬에서

를 얻을 :

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

그러나 파이어 폭스에서 :

을

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. 나는이 경로에 "텍스트 줄"을 추가하는 triyng입니다. 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!