Question

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

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

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

<svg  id="svdid-ta" viewBox="430.73 1440.1 705.52 987" width="175" 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工具）如何验证实际字体大小是什么..？

Answer 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工具验证这一点，我认为你不能。

Answer 2

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

对齐参数并不重要。因此，对于“meet”（这是默认值），您需要：

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

表示“切片”：

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

和“无”：

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