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

Question

我正在使用<text>和<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:空间="保存"停在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);