javascript - 垂直对齐 svg 圆内的文本

Question

我正在尝试将 <text> 居中<path>里面元素。路径是使用 @opsb 绘制的圆很好的答案。我可以使用 text-anchor='middle' 将文本水平居中.

有没有办法让它垂直居中？

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path id='path' fill="transparent" stroke='red' stroke-width='6'/>
  <text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle'>5</text>
</svg>

JSFiddle使用 JavaScript。

Answer 1

您需要使用alignment-baseline 使文本垂直居中。

类似这样的事情:

<text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle' alignment-baseline="central">5</text>