title: Align text in SVG
body: <p>How can I align text in an SVG without having to do it manually. At the moment I have manually set the positioning of the text inside a rectangle. This is fine, until the value of the text changed and then It looks off and doesnt really work. Is there a way of automatically setting the text to be aligned in the center, similar to <code>text-align:center</code> so it becomes responsive according to the page?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;svg width="170" height="80" &gt;
          &lt;rect width="150" height="70" stroke="#4f7f64" stroke-width="5" fill="white" /&gt;
          &lt;text x="45" y="25" r="65" font-family="'futura-pt-n7', 'futura-pt' , Helvetica, Arial, sans-serif" font-size="18" fill="black" font-weight="bold"&gt; Settled &lt;/text&gt;
          &lt;text x="30%" y="55" r="65" font-family="'futura-pt-n7', 'futura-pt' , Helvetica, Arial, sans-serif" font-size="18" fill="black" font-weight="bold"&gt; @String.Format("{0:C0}", Model.ReportTotalData.Select(r =&gt; r.Settled).FirstOrDefault()) &lt;/text&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>