如何动态调整svg中的文本大小?

时间:2021-12-20 23:15:19

I'm working on a report that includes an embedded svg diagram. The diagram is drawn using relative coordinates, so when a browser window resizes the diagram resizes pretty well. The only exception there is text - it remains the same. Is it possible to draw text in svg that is resizable?

我正在编写一份包含嵌入式svg图表的报告。该图是使用相对坐标绘制的,因此当浏览器窗口调整大小时,图表会很好地调整大小。唯一的例外是文本 - 它保持不变。是否可以在svg中绘制可调整大小的文本?

1 个解决方案

#1


2  

I think you have to use a relative size for the font-size. See http://www.w3.org/TR/SVG11/coords.html#UnitIdentifiers. When you use an absolute size like pt or cm, it is automatically calculated what the size must be to display correctly on your monitor, to get that size. But when you use px, the current viewport is used. If you don't specify a unit, the user units are also used as in the example on the linked document:

我认为你必须使用相对大小的字体大小。请参见http://www.w3.org/TR/SVG11/coords.html#UnitIdentifiers。当您使用像pt或cm这样的绝对大小时,会自动计算在显示器上正确显示的大小,以获得该大小。但是当您使用px时,将使用当前视口。如果未指定单位,则还会在链接文档的示例中使用用户单位:

<text style="font-size: 50">Text size is 50 user units</text>

#1


2  

I think you have to use a relative size for the font-size. See http://www.w3.org/TR/SVG11/coords.html#UnitIdentifiers. When you use an absolute size like pt or cm, it is automatically calculated what the size must be to display correctly on your monitor, to get that size. But when you use px, the current viewport is used. If you don't specify a unit, the user units are also used as in the example on the linked document:

我认为你必须使用相对大小的字体大小。请参见http://www.w3.org/TR/SVG11/coords.html#UnitIdentifiers。当您使用像pt或cm这样的绝对大小时,会自动计算在显示器上正确显示的大小,以获得该大小。但是当您使用px时,将使用当前视口。如果未指定单位,则还会在链接文档的示例中使用用户单位:

<text style="font-size: 50">Text size is 50 user units</text>