2

我的应用程序依赖于使用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()方法中只有一个的效果。我该如何克服呢？

4

1 回答 1

4

这个问题确实会定期出现......（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 渲染评估 tspan 时，它会根据其前身的边界框对每个 tspan 进行排序。因为一个空的 tspan 有一个 0x0 边界框，所以换行符——尽管发出了——在功能上是不可见的。

粗略的解决方法是发出“\n \n”——空格字符会产生一个边界框，因此会导致渲染额外的换行符。在这里进行理智测试。

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

$(textElement.node).find( 'tspan' ).attr( 'dy', spacing );
于 2012-10-30T19:07:45.870 回答