相对于视口大小的SVG字体大小

Question

假设我有以下简单的 SVN 仓库：

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

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

我该如何实现这一点？

- Michael

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”的底部）的距离。

要与圆圈的高度相匹配，您将需要使用更高的字体大小。它需要增加多少取决于字体本身。没有一种自动缩放字体的方式可以使一段文本始终保持固定高度。您只需尝试不同值，找到适用于所使用字体和文本的正确数值即可。

- Paul LeBeau

---

不知道字体在SVG中使用与其他对象相同的尺寸单位进行测量。所以答案完全正确！ :-) - Michael

在某种意义上，我有相反的问题：我想创建使用页面字体大小的文本，但保持该大小独立于 viewBox。但我找不到任何解决方法：如果 viewBox 的宽度为1000，页面字体大小为10px，则字体被缩放为其尺寸的 10/1000，因此无法阅读。是否有任何方法可以解决这个问题？ - Joshua Frank

SVG内的任何内容都会受到viewBox和viewport的缩放影响（如果启用了"non-scaling-stroke"，则描边除外）。唯一的变通方法是使用JS将动态的transform="scale()"应用于文本元素。 - Paul LeBeau