NodeJS中的SVG文本居中答案

【问题标题】：SVG Text centering in NodeJSNodeJS中的SVG文本居中
【发布时间】：2016-04-29 04:01:17
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

你提前知道svg viewBox的宽/高吗？
是的，实际上我创建了静态 SVG-s。我知道所有尺寸（视口、矩形），但文本的宽度/高度。文本也是静态的。所以，应该有一种计算方法。

标签： node.js svg text center

【解决方案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>

多行比较棘手，您需要考虑字体大小等进行调整。

【讨论】：

谢谢。我阅读了 SVG 的规范，但没有仔细阅读（我想我还需要根据字体计算大小）。但我也需要多行。有没有一种简单的方法可以从节点 js 中的开放式字体中读取字体高度？其他计算我很清楚。
我的意思是，我知道，字体大小是字体的高度，但行高取决于字体指标（在大多数情况下，它大约比字体大小大 20%）