Empty tspan not rendered / dy-value ignored

Question

I have the following sample svg:

<svg>
 <text x="0" y="10">
  <tspan x="0" dy="10">Foo</tspan>
  <tspan x="0" dy="10"></tspan> // this is completely ignored
  <tspan x="0" dy="10">Bar</tspan> // this is positioned 10 units below not 20
 </text>
</svg>

Why is the empy tspan ignored? Not even the dy-attribute is recogniced so the next line displays directly below the first.

How can I achieve a blank line (WITH a tspan because its all generated)? I know that a simple space would fix it but I need a real empty line. Maybe there are some css hacks I could use?

Answer 1

What I do is use a tspan containing any value (I use a dot) with a dy attribute and then hide it from view.

<svg>
    <text x="0" y="10">
        <tspan x="0" dy="10">Foo</tspan>
        <tspan x="0" dy="10" visibility="hidden">.</tspan> // this won't be visible but will keep the space
        <tspan x="0" dy="10">Bar</tspan>
    </text>
</svg>

Visibility="hidden" works on Chrome, IE and Safari (haven't tested other browsers), whereas IE won't like opacity="0" and will ignore the spacing.

Hope it helps