对齐 SVG 元素内的文本答案

【问题标题】：Align text inside SVG element对齐 SVG 元素内的文本
【发布时间】：2019-06-22 17:55:14
【问题描述】：

我有 SVG 元素，我想通过内部的 x 和 y 轴对齐文本。

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

我该怎么做？感谢您的任何提示。

附：我无法更改 SVG 元素的 viewBox 和大小，也无法将文本从 g 元素移出。

【问题讨论】：

标签： html css svg

【解决方案1】：

我不知道这是不是你要找的

     <text x="45" y="0">Lorem</text>

【讨论】：

【解决方案2】：

检查下面的sn-p：

<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>

您可以在此答案中找到更多信息：How to place and center text in an SVG rectangle

【讨论】：