如何在Raphael.js中使用`text`方法添加双“新行”字符？

Question

我的应用依赖于使用 Raphael.js 将一些HTML文本元素转换为SVG元素。

这些HTML对象中的文本由用户通过textarea输入提供。因此，他们也可以输入新行。创建SVG时需要考虑这些新行。 为此，我使用以下代码：

function replaceNL(text) {      
    return text.replace(/[\n\r]/g, "\n");
}

将SVG添加到页面时：

var obj = paper.text(x,y,replaceNL(this.text));

我遇到的问题是双重（或更多）换行符串（例如“\ n \ n”）在.text()方法中只有一个效果。 我怎么能克服这个？

Answer 1

这个问题确实会定期出现......（http://stackoverflow.com/questions/12155954/nbsp-in-raphael-js）

如果修改纸质元素以保留空格，则其中的所有文本元素都将以您希望的方式运行。这样做：

paper.canvas.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");

以下是警告：Raphael在换行符上拆分传递给text的字符串，并将每个段插入到自己的tspan中。当SVG渲染评估tspans时，它会根据其前任的边界框对每个进行排序。因为空的tspan有一个0x0边界框，所以换行 - 虽然被发出 - 在功能上是不可见的。

粗略的解决方法是发出“\ n \ n” - 空格字符生成一个边界框，从而导致额外的换行符被渲染。完整性测试here。

要控制tspans之间换行符的高度，您需要修改其dy属性。 Raphael不支持开箱即用，但是编写一个javascript函数来手动设置它们很容易。这是jquery方法，给定一个Raphael文本元素textElement，并将您想要的间距（以像素为单位）设为spacing：

$(textElement.node).find( 'tspan' ).attr( 'dy', spacing );