Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 932
DogBot Avatar asked Apr 23 '15 16:04

DogBot


People also ask

What is text line height?

Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next. Traditionally, in metal type, this was the combined measurement of the font size and the strips of lead that were inserted between each row (called “leading”) of type.


1 Answers

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

like image 164
DanMan Avatar answered Sep 23 '22 16:09

DanMan