SVG：扩展SVG文档时如何缩放字体大小？ [英] SVG: how to scale font sizes when scaling SVG document?

问题描述

此，这个，这个， this 和关于SVG扩展的这个没有帮助。

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

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

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

我们对使用<$ c感到谨慎$ c> scale transform 属性，因为用户可以在编辑250x500版本时重新定位或旋转元素。

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

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

或者手动计算并设置最佳字体大小使用javascript你可以相应地改变字体大小

document.getElementById（'svgID'）。style.fontSize =25px;

Questions like this, this, this, this, and this on SVG scaling did not help.

What's the best way to scale font sizes when scaling SVG documents?

Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.

Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.

We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.

We need the 500x1000 version to look proportionally like the 250x500 version.

Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.

Or is manually computing and setting the font sizes the best way?

解决方案

Using javascript you can change the font size accordingly

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

这篇关于SVG：扩展SVG文档时如何缩放字体大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！