Как центрировать текст внутри элемента SVG g?

Question

Я пробовал это http://jsfiddle.net/helderdarocha/e4bAh/. Но это только по горизонтали. Это код и JSFiddle:

<svg width="400" height="400"> 
    <g class="point" transform="translate(225,217)"> 
     <circle></circle> 
     <text class="pointIndex" y="50"> 
     <tspan text-anchor="middle">10</tspan> 
     </text> 
    </g> 
    </svg> 

<style> 
    .point circle { 
     cursor: pointer; 
     text-align: center; 
     fill: #E2137E; 
     r: 10; 
     stroke: #333; 
     stroke-width: 2px; 
    } 
</style> 

Как центрировать .pointIndex внутри .point?

https://jsfiddle.net/alexcheninfo/9a112b63/6/

Answer 1

Наконец проблема была с y="50" в text.pointIndex, изменить его y="5", чтобы получить его вертикально по центру

JS Fiddle - updated

.point circle { 
 
    cursor: pointer; 
 
    text-align: center; 
 
    fill: #E2137E; 
 
    r: 10; 
 
    stroke: #333; 
 
    stroke-width: 2px; 
 
}

<svg width="400" height="400"> 
 
    <g class="point" transform="translate(225,217)"> 
 
    <circle></circle> 
 
    <text class="pointIndex" y="5"> 
 
     <tspan text-anchor="middle">10</tspan> 
 
    </text> 
 
    </g> 
 
</svg>