用其中之一创建svg文本多行是空行

Question

我正在通过使用<文本>和<tspan>为每行创建SVG文本。 文本有很多行，其中之一是空行，有些事情是这样的：

this is text line 1 


this is text line 3 

上面的例子是三行文本，其中之一是空的。

问题是SVG文本只显示两行而不是三行（第一行和最后一行，没有中间行）。

在这里看到：http://jsfiddle.net/svincoll4/DX4Cn/

任何人有这样的解决方案，使其显示三行？

注意：我正在使用Raphael JS创建这些文本。

Answer 1

默认情况下，空格在html和svg中被压缩，所以\ n \ n \ n变成\ n。此外，如果根本没有文字，那么中间一行将被忽略。 xml：space =“preserve”停止SVG中的空格压缩，并且额外的空间使中间行存在。

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);