javascript - SVG:缩放 SVG 文档时如何缩放字体大小？

Question

类似 this 的问题, this , this , this , 和 this关于 SVG 缩放没有帮助。

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

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

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

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

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

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

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

Answer 1

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

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