It seems line-height is the one CSS property absent from svg text. The best resource on SVG I have found is: Jenkov 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

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

• javascript
• css
• svg

• This might help but looks like a bit of a hack stackoverflow.com/questions/9857659/… – geedubb Commented Apr 23, 2015 at 16:46

1 Answer 1

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