相对于viewBox大小的SVG字体大小

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'的底部）进行测量。

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