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”的底部)测量的。

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