title: SVG <circle> fill covering previous circle
body: <p>I'm building an svg circular progress graph.</p>
  
  <p>I'm trying to style my svg's stroke to match the visible part of circle.center but when I change the stroke of circle.progress it does not shrink the circle's fill enough to show the black part of circle.progress and match the width of the actual progress bar.</p>
  
  <pre><code>&lt;svg width="300" height="300"&gt;
      &lt;circle class="progress" id="progress-radial-1" r="125"/&gt;
      &lt;circle class="center" r="140" cx="140" cy="140" /&gt;
      &lt;text text-anchor="middle" x="150" y="185" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/BenRacicot/2kc7c56j/" rel="nofollow noreferrer">https://jsfiddle.net/BenRacicot/2kc7c56j/</a></p>
  
  <p>Here is the svg's outcome (left): 
  <a href="https://i.stack.imgur.com/kATCU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kATCU.png" alt="enter image description here"></a>
  I'm trying to get the results on the right. As you can see the circle.center which controls the blue progress bar (at 50%) also has a fill which is white in the image (gray in fiddle) and covers the black svg stroke too much. I need that stroke to be the same width of the blue.</p>