SVG - 如何设置文本行高

12 浏览
0 Comments

SVG - 如何设置文本行高

似乎在svg文本中缺少line-height这个CSS属性。我找到的关于SVG的最好资源是:Jenkov.com SVG教程,但在这里没有提到它,也没有在MDN上找到相关信息。所以如果有人能够明确说明这个问题或分享一种技巧,我对文本换行时行间距很感兴趣。谢谢。

0
0 Comments

SVG 1.1官方只支持单行文本,因此不支持line-height设置。我刚刚尝试在Inkscape中创建了一个文本块,它使用了一个flowRoot元素(其中包含一个包含实际文本的flowPara元素)。然后,flowRoot元素实际上被赋予了line-height(以%为单位)。

我不知道这种方法的支持有多广泛,因为它曾经是SVG 1.2的一部分。你可能还想看一下这里:Auto line-wrapping in SVG text

根据上述内容,我们可以得出以下结论:SVG 1.1官方只支持单行文本,因此不支持line-height设置。但是,通过使用flowRoot元素和line-height属性,我们可以在SVG中创建多行文本。这种方法在较新的版本中可能不被广泛支持,因此需要根据具体情况进行判断。如果需要自动换行,可以参考相关链接中的解决方法。

0