如何在JavaScript中对SVG文本进行换行？

Question

所以这是我所拥有的：

<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 ...
}
...

现在，即使我使用alert（），我的很长的工具提示文本也没有换行符。它向我显示文本实际上有两行。（不过，它包含一个“ \”，请问如何将其删除？） 我无法在任何地方使用CDATA。

Answer 1

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。