Question

我正在使用＆lt; text＆gt;创建SVG文本与＆lt; tspan＆gt;对于每一行。文本有很多行，其中一行是空行，有些东西是这样的：

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

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

1 个答案: