title: Centering an icon in SVG
body: <p>I have the following very simple SVG:</p>
  
  <pre><code>&lt;div id="circli" class="svg-container"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful"&gt;
      &lt;g stroke="#ccc"&gt;
        &lt;line x1="133" y1="50" x2="140" y2="40" stroke-width="2"&gt;&lt;/line&gt;
      &lt;/g&gt;
      &lt;g stroke="#ccc"&gt;
        &lt;line x1="140" y1="40" x2="200" y2="40" stroke-width="2"&gt;&lt;/line&gt;
      &lt;/g&gt;
      &lt;circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"&gt;&lt;/circle&gt;
      &lt;circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"&gt;&lt;/circle&gt;
      &lt;text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"&gt;&lt;/text&gt;
      &lt;text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa"&gt;50%&lt;/text&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is pertaining to the icon and how it is being centered, I am not quite understanding the logic behind how exactly the author of this code has centered the icon. The code for the icon and the circle looks like below:</p>
  
  <pre><code>&lt;circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"&gt;&lt;/circle&gt;
  &lt;circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"&gt;&lt;/circle&gt;
  &lt;text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"&gt;&lt;/text&gt;
  </code></pre>
  
  <p>Notice the <code>x</code>, <code>y</code> attributes on the <code>&lt;text&gt;</code> element like so:</p>
  
  <pre><code> x="100" y="110"
  </code></pre>
  
  <p>Now if you play around in the console, you'll notice that any value apart from that will make the icon no longer centered. </p>
  
  <p>I am not quite understanding the logic for centering the icon here. Can anybody explain please? </p>
  
  <p>P.S. I believe the <code>y</code> value is <code>110</code> to counter the size of the icon, something like negative margin when vertically aligning a absolutely positioned element. </p>
  
  <p><strong><a href="https://jsfiddle.net/6d024y55/" rel="nofollow">FIDDLE HERE</a></strong> Can somebody please explain this to me? </p>