title: How can I center the text element inside <g> element?
body: <p>This is the structure of my SVG</p>
  <pre><code>&lt;g id=&quot;CDT-B6-2&quot;&gt;
     &lt;path id=&quot;CDT-B6-box&quot;/&gt;
     &lt;text x=&quot;1210&quot; y=&quot;993&quot; id=&quot;CDT-B6-text&quot;&gt;888&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  <p>Problems:</p>
  <ol>
  <li>The <code>textContent</code> from text element is dynamic, it may shorter than length of 3</li>
  <li>Inside my SVG I have many <code>&lt;g id=&quot;CDT-B6-2&quot;&gt;</code> but different ids &amp; position</li>
  <li>I used <code>x=&quot;50%&quot; y=&quot;50%&quot;</code> to all text elements but it didn't put the text alignment centered from <code>&lt;g&gt;</code> element</li>
  </ol>