title: How to detect real size of svg path in FireFox?
body: <p>I'm trying to get real "path" size, using <code>getBoundingClientRect</code> function for that, but in FireFox I get different results</p>
  
  <p>In Google Chrome all is well:</p>
  
  <pre><code>1. 100px x 100px
  2. 100px x 100px
  </code></pre>
  
  <p>But in FireFox:</p>
  
  <pre><code>1. 104px x 104px
  2. 100px x 100px
  </code></pre>
  
  <p>Why <code>stroke-width="1"</code> added 4px? How to get real size without empty spaces in FF?</p>
  
  <p><a href="https://i.stack.imgur.com/98vfm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98vfm.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;With stroke-width="1"&lt;/div&gt;
  &lt;svg width="110" height="110"&gt;
    &lt;path stroke-width="1" d="M0 0 L 100 0 L100 100 L 0 100 Z" fill="black" stroke="black"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div&gt;With stroke-width="0"&lt;/div&gt;
  &lt;svg width="110" height="110"&gt;
    &lt;path stroke-width="0" d="M0 0 L 100 0 L100 100 L 0 100 Z" fill="black" stroke="black"&gt;&lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S.
  I'm triyng to add "line with text" to this path. I get path position+size with <code>getBoundingClientRect</code> function, create new div in those coordinates.</p>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/jUxWs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jUxWs.png" alt="enter image description here"></a></p>