CODEWITHSUNDEEP
javascriptcsssvg
DogBot
DogBot

Reputation: 528

SVG - how to set text line-height

It seems line-height is the one CSS property absent from svg text. The best resource on SVG I have found is: Jenkov.com SVG Tutorials and there is no mention of it, neither could I find mention of it on MDN.

So if anyone can shed definitive light on this or share a technique. I am basically interested in the spacing between lines of text that wrap, not independent text elements.

Thanks

Upvotes: 12

Views: 26213

Answers (1)

DanMan
DanMan

Reputation: 11562

SVG 1.1 (officially) only supports single line text, hence no line-height setting.

I've just tried creating a block of text in Inkscape, and it's using a flowRoot element (containing a flowPara element with the actual text in it). Then the flowRoot element actually has line-height assigned to it (in %).

I don't know how wide-spread support for that way is, since it used to be part of SVG 1.2. You might also want to have a look here: Auto line-wrapping in SVG text

Upvotes: 16

Related Questions