如何在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>