Question

I am creating the SVG text by using the <text> with <tspan> for each line.
The text has many lines and one of them is empty line, some thing like this:

this is text line 1


this is text line 3

the example above is a text with three lines, one of them is empty.

the problem is the SVG text only displays two lines instead of three lines (the first and the end line, without the middle line).

See here: http://jsfiddle.net/svincoll4/DX4Cn/

Anyone have solution about this to make it display three lines?

Note: I am using the Raphael JS to create these text.

Answer 1

By default whitespace is compressed in html and svg so \n\n\n becomes \n. Also if there’s no text at all then the middle line is ignored. xml:space=”preserve” stops whitespace compression in SVG and and extra space makes the middle line exist.

var $svg = Raphael('container', 400, 400);
var $text = "this is line 1\n \nthis is line 3";
$svg.canvas.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
$svg.text(50, 100, $text);