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

最后问题出在 text.pointIndex 中的 y="50" ，将其更改为 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>