title: SVG displays differently in Firefox then Chrome
body: <p>I encountered weird Firefox's and Edge's behaviour. It renders SVG images cutting parts of them. SVG works fine in Chrome but in Firefox and Microsoft Edge, it breaks. </p>
  
  <p>In Firefox</p>
  
  <p><a href="https://i.stack.imgur.com/4X2GW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4X2GW.png" alt="In Firefox"></a></p>
  
  <p>In Chrome</p>
  
  <p><a href="https://i.stack.imgur.com/kCXln.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kCXln.png" alt="In Chrome"></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;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;style&gt;
        body {
          background: #000;
        }
        .continer {
          width: 200px;
          height: 200px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="continer"&gt;
        &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;
          &lt;circle fill="rgba(255, 255, 255, 0.4)" cx="10" cy="10" r="10"&gt;&lt;/circle&gt;
          &lt;circle
            stroke-dasharray="6.28 31.4"
            transform="rotate(-90) translate(-20)"
            stroke-width="10"
            fill="transparent"
            stroke="#ffffff"
            cx="10"
            cy="10"
            r="5"
          &gt;&lt;/circle&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>