如何确定 SVG 元素的字体大小？

Posted 2023-03-06

【中文标题】如何确定 SVG 元素的字体大小？

【英文标题】：How to determine font-size for SVG element?

【发布时间】：2015-12-20 02:15:59

【问题描述】：

我不确定 SVG 如何计算文本元素的渲染字体大小。我想从理论上计算文本元素的字体大小。

然后，我想使用 Chrome 工具验证实际字体大小。

以下是一个例子。首先，SVG头：

<svg  id="svdid-ta" viewBox="430.73 1440.1 705.52 987"  height ="244.82" >

我了解 viewBox 大小的比率约为 4.03（705.52 / 175），因此我预计实际字体大小会按此比例缩小。

这是文本元素：

<text id = "TEXT_NAME" x = "430.73" y = "1486.1" font-size = "36px">Test Text</text>

正如预期的那样，实际渲染的字体大小比 36px 小很多。

但我想知道所渲染的精确字体大小是多少。

Chrome 在计算选项卡中报告字体大小为 36 像素。这显然是错误的，因为实际渲染的字体非常小。

所以，我的问题是我如何实际计算理论字体大小，以便我可以提前知道渲染字体的大小......？

然后，我如何（使用 Chrome 工具）验证实际的字体大小是什么......？

【参考方案1】：

您的 SVG 坐标系正在按比例缩小以适合指定的宽度和高度 (175 x 244.82)。这就是字体较小的原因。

幸运的是，您的 viewBox 和宽度/高度具有相同的纵横比，因此确定精确的缩放比例是微不足道的。只是width / viewBox.width（或height / viewBox.height）。

width / viewBox.width = 175 / 705.52 = 0.248

因此，假设没有其他影响它的转换，您的最终文本大小应该是：

36px * 0.248 = 8.9px

至于如何用 Chrome 工具验证这一点，我认为你不能。

【讨论】：

对于所有情况的精确计算，您还必须考虑 preserveAspectRatio。对于“xMidYMid meet”的默认值，公式将是 36px * min(width / viewBox.width , height / viewBox.height) 对于“none”，您将有不同的 x 和 y 比例，因此没有直接映射到字体大小......你看看你是否想要正确对于所有情况，它都会更复杂一些，但原则上这个答案是正确的。

@HolgerWill 正如我在回答中指出的那样，SVG 和 viewBox 的纵横比是相同的，所以在这种情况下，preserveAspectRatio 的值无关紧要。

是的，我只是想指出，使用公式 36px * min(width / viewBox.width , height / viewBox.height) 您可以涵盖所有宽度/高度比不同的情况，只要您保持 preserveAspectRatio 不变。

【参考方案2】：

好的，这是为所有可能的 preseveAspectRatio 情况计算结果字体大小的方法：

对齐参数无关紧要。因此，对于“见面”（这是默认设置），您需要：

Scale =  min(width / viewBox.width , height / viewBox.height)

对于“切片”：

Scale = max(width / viewBox.width , height / viewBox.height)

对于“无”：

scaleX = width / viewBox.width
scaleY = height / viewBox.height