SVG：缩放 SVG 文档时如何缩放字体大小？答案

【问题标题】：SVG: how to scale font sizes when scaling SVG document?SVG：缩放 SVG 文档时如何缩放字体大小？
【发布时间】：2019-05-28 20:14:25
【问题描述】：

this、this、this、this 和 this 等关于 SVG 缩放的问题没有帮助。

缩放 SVG 文档时缩放字体大小的最佳方法是什么？

假设原始 SVG 文档为 500x1000。为了适应我们的设计视口，我们将文档缩放到 250x500，并允许用户进行一些编辑，例如重新定位和更改文本。编辑完成后，我们会缩小到 500x1000，然后导出为 PNG 图像。

目前，我们手动重新计算每个比例的字体大小。如果在原始 500x1000 大小时字体大小为 20，我们在缩小到 250x500 时将字体大小更改为 10。

我们对使用 scale transform 属性持谨慎态度，因为用户可能会在编辑 250x500 版本时重新定位或旋转元素。

我们需要 500x1000 版本在比例上看起来像 250x500 版本。

有没有更好的方法来缩放字体大小？理想情况下，我们可以使用百分比来表示字体大小，例如元素的宽度和高度，但这不起作用。

还是手动计算和设置字体大小是最好的方法？

【问题讨论】：

我会说你不需要缩放字体。可以肯定的是，我需要查看您的代码。它的简化版本。您需要的是<svg> 元素的vewBox 属性，例如vewBox="0 0 250 500"。 viewBox 属性以用户单位定义 SVG 视口的大小和位置。当您将 <svg> 元素的大小从 250x500 调整为 500x1000 时，视口仍然是 250x500 用户单位。
如果你有<svg vewBox="0 0 250 500" width="250">，一个用户单位相当于1px。如果你这样做：<svg vewBox="0 0 250 500" width="500"> SVG 的宽度仍然是 250 个用户单位，但一个用户单位相当于 2px。字体大小以用户单位定义，尽管您在 CSS 中这样定义：font-size: 16px

【解决方案1】：

使用 javascript 可以相应地更改字体大小

document.getElementById('svgID').style.fontSize = "25px";

【讨论】：