SVG以NodeJS为中心的文本

Question

我想在rect，垂直和水平居中中插入文字（可能是多行）。 SVG在NodeJS的服务器端上创建，结果将显示在浏览器中。

SVG并不真正支持居中文本。另一方面，我不知道如何计算服务器端文本的宽度/高度以正确定位。

有什么想法吗？

Answer 1

如果您知道宽度/高度，可以使用x，y定位文本元素并将对齐设置为中间...

https://jsfiddle.net/ian_b/z9t291nL/1/

<svg width="400" height="400" viewBox="0 0 400 400">
  <text text-anchor="middle" alignment-baseline="middle" x="200" y="200">QWERTYUIOPASDFGHJKLZXCVBNM</text>
  <circle cx="200" cy="200" r="5"/> 
</svg>

对于多行来说它更棘手，你需要根据字体大小等进行调整。