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()メソッド内の 1 つのみの効果を持つことです。どうすればこれを克服できますか？

4

1 に答える 1

4

この質問は定期的に出てきます... (http://stackoverflow.com/questions/12155954/nbsp-in-raphael-js)

paper 要素を変更してスペースを保持すると、その中のすべてのテキスト要素が希望どおりに動作します。次のようにします。

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

注意点は次のとおりです。Raphael は渡された文字列をtext改行で分割し、各セグメントを独自の tspan に挿入します。SVG レンダリングが tspan を評価するとき、前のオブジェクトのバウンディング ボックスに基づいてそれぞれを順序付けます。空の tspan には 0x0 境界ボックスがあるため、改行は (出力されますが) 機能的に見えません。

大まかな回避策は、「\n \n」を発行することです。スペース文字は境界ボックスを生成するため、余分な改行がレンダリングされます。ここでサニティテスト。

tspan 間の改行の高さを制御するには、dy 属性を変更する必要があります。Raphael はそのままではこれをサポートしていませんが、JavaScript 関数を記述してこれらを手動で設定するのは簡単です。Raphael テキスト要素textElementと希望する間隔 (ピクセル単位) が与えられた場合の jquery メソッドは次のspacingとおりです。

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