对齐SVG元素内的文本

Question

我有SVG元素,我希望通过x和y轴对齐文本.

<svg width="90px" height="90px" viewBox="-9 -3 90 76" style="border: 1px solid black;">
  <g>
     <text>Lorem</text>
  </g>
</svg>

我怎样才能做到这一点？谢谢你的任何提示.

PS我无法更改viewBox和SVG元素的大小或从g元素外移动文本.

Answer 1

检查下面的代码:

<svg width="90px" height="90px" viewBox="-9 -3 90 76" style="border: 1px solid black;">
   <g>
      <text x="40%" y="50%" text-anchor="middle">Lorem</text>
   </g>
</svg>

您可以在此答案中找到更多信息:如何在SVG矩形中放置和居中文本