title: is this a svg stroke-width bug in chrome?
body: <p>Im trying to create a svg dot that i can scale up using stroke width.</p>
  <p>I want to controll all my icons stroke-width with a variable and to do this i need to be able to create dots not just lines, but im getting some weird results when i have a small circle or a circular path and i increase the stroke width.</p>
  <p>The red color is the circle fill, the blue color is the stroke but when increasing the stroke width im getting a gap between the fill and the stroke for some reason. (i used zoom 2000% to make everything bigger)</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-css lang-css prettyprint-override"><code>svg{
    zoom: 3000%;
    margin-top: 1px;
    fill: red;
    stroke: blue;
  }
  
  body{
      display: flex;
    div{
      display: flex;
      flex: 1;
      align-items: center;
      flex-direction: column;
      height: 100%;
      padding: 20px 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    stroke-width: 1px;
  &lt;svg stroke-width="1" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843"&gt;
    &lt;g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)"&gt;
      &lt;path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/&gt;
      &lt;circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    stroke-width: 2px;
  &lt;svg stroke-width="2" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843"&gt;
    &lt;g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)"&gt;
      &lt;path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/&gt;
      &lt;circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    stroke-width: 3px;
  &lt;svg stroke-width="3px"  xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843"&gt;
    &lt;g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)"&gt;
      &lt;path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/&gt;
      &lt;circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;
    stroke-width: 4px;
  &lt;svg stroke-width="4px" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843"&gt;
    &lt;g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)"&gt;
      &lt;path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/&gt;
      &lt;circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>