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
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With