It looks like this will space the lines one after another without hard-coding a font size in each tspan
. Font at 15px:
<svg style="border:1px solid black" >
<text x="0" y="0" font-size="15" dy="0">
<tspan x="0" dy=".6em">tspan line 1</tspan>
<tspan x="0" dy="1.2em">tspan line 2</tspan>
<tspan x="0" dy="1.2em">tspan line 3</tspan>
</text>
</svg>
If you change the font size the lines continue to be spaced at 120%
apart from each other or 1.2em
. Font at 20px:
<svg style="border:1px solid black" >
<text x="0" y="0" font-size="20" dy="0">
<tspan x="0" dy=".6em">tspan line 1</tspan>
<tspan x="0" dy="1.2em">tspan line 2</tspan>
<tspan x="0" dy="1.2em">tspan line 3</tspan>
</text>
</svg>
Example – http://codepen.io/anon/pen/oXMVqo