title: How to center text inside a SVG g element?
body: <p>I tried this <a href="http://jsfiddle.net/helderdarocha/e4bAh/" rel="noreferrer">http://jsfiddle.net/helderdarocha/e4bAh/</a>. But it's only centered horizontally. This is the code and JSFiddle: </p>
  
  <pre><code>  &lt;svg width="400" height="400"&gt;
      &lt;g class="point" transform="translate(225,217)"&gt;
        &lt;circle&gt;&lt;/circle&gt;
        &lt;text class="pointIndex" y="50"&gt;
          &lt;tspan text-anchor="middle"&gt;10&lt;/tspan&gt;
        &lt;/text&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  
   &lt;style&gt;
      .point circle {
        cursor: pointer;
        text-align: center;
        fill: #E2137E;
        r: 10;
        stroke: #333;
        stroke-width: 2px;
      }
   &lt;/style&gt;
  </code></pre>
  
  <p>How to center <code>.pointIndex</code> inside <code>.point</code>?</p>
  
  <p><a href="https://jsfiddle.net/alexcheninfo/9a112b63/6/" rel="noreferrer">https://jsfiddle.net/alexcheninfo/9a112b63/6/</a></p>