text - 创建 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: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);