title: Space between SVG stroke and fill
body: <p>Filling and stroking a circle with the same color and a <code>stroke-width</code> exceeding a certain size, produces a strange transparent region “between” the two paint regions. What is going on?</p>
  
  <p>This is happening in both Chrome and Firefox, so it may be to spec, but I couldn’t find any language in the spec about this behavior.</p>
  
  <p><a href="https://jsfiddle.net/rr7jzc17/1/" rel="noreferrer">Fiddle</a></p>
  
  <pre><code>&lt;svg viewBox="0 0 300 300"&gt;
    &lt;circle cx="100" cy="100" r="8" 
      stroke="#000" stroke-width="40" 
      fill="#000"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Produces this rendering: </p>
  
  <p><a href="https://i.stack.imgur.com/oqzBr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oqzBr.png" alt="A black circle with a transparent ring inside"></a></p>