SVG 字体大小相对于 viewBox 大小

Question

假设我有以下简单的 SVN：

<svg viewBox="-3 -3 6 6 ">
   <circle cx="1" cy="1" r="0.2"/>
</svg>

现在我想在圆圈旁边添加一个文本，它与圆圈具有相同的高度，在所选坐标系中为 0.2。

我怎样才能做到这一点？

Answer 1

好吧，天真的答案是使用圆的直径作为您的尺寸。也就是说，font-size="0.4"。

<svg viewBox="-3 -3 6 6 ">
   <circle cx="1" cy="1" r="0.2"/>
   <text x="0.8" y="1.2" font-size="0.4" fill="red" font-family="Arial">XX</text>
</svg>

但是，对于几乎所有字体，这都行不通。那是因为字体大小指的是 em 大小，它是从任何字形的最高坐标（通常是重音符号的顶部）到最低的下降部分（例如“g”的底部）。

要匹配圆圈的高度，您需要使用更高的字体大小。它需要多高取决于字体。没有自动缩放字体的方法，因此一段文本始终是设定的高度。您只需要试验并为您正在使用的文本和字体找到正确的值。