[解決済み] javascriptでsvgテキストを改行するには？

質問

ということで、こんな感じです。

<path class="..." onmousemove="show_tooltip(event,'very long text 
    \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/>

<rect class="tooltip_bg" id="tooltip_bg" ... />
<text class="tooltip" id="tooltip" ...>Tooltip</text>

<script>
<![CDATA[
function show_tooltip(e,text) {
    var tt = document.getElementById('tooltip');
    var bg = document.getElementById('tooltip_bg');

    // set position ...

    tt.textContent=text;

    bg.setAttribute('width',tt.getBBox().width+10);
    bg.setAttribute('height',tt.getBBox().height+6);

    // set visibility ...
}
...

今、私の非常に長いtooltipテキストは、alert();を使用すると、テキストが実際に2行あることを示すにもかかわらず、改行されていません。(これは "\" を含んでいますが、ところでどうやってそれを削除するのでしょうか?)

CDATAはどこにも使えません。

どのように解決するのですか？

これはSVG 1.1がサポートしているものではありません。SVG 1.2 では textArea 要素があり、自動的に単語を折り返しますが、全てのブラウザで実装されているわけではありません。SVG 2 は実装する予定はありません。 textArea を実装する予定はありませんが 自動折り返しテキスト .

しかし、改行する位置がわかっているのであれば、テキストを複数の <tspan> に分割し、それぞれを x="0" と dy="1.4em" を使って、実際のテキスト行をシミュレートすることができます。例えば

<g transform="translate(123 456)"><!-- replace with your target upper left corner coordinates -->
  <text x="0" y="0">
    <tspan x="0" dy="1.2em">very long text</tspan>
    <tspan x="0" dy="1.2em">I would like to linebreak</tspan>
  </text>
</g>

もちろん、JavaScriptからこれを行いたいので、各要素を手動で作成し、DOMに挿入する必要があります。