如何在javascript中对svg文本进行换行？

javascript newline svg line-breaks

2022-08-30 04:26:45

所以这是我所拥有的：

<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 在任何地方工作。

答案 1

这不是 SVG 1.1 支持的内容。SVG 1.2确实具有自动换行的元素，但它并不是在所有浏览器中都实现的。SVG 2 不打算实现 textArea，但它具有自动换行的文本。textArea

但是，如果您已经知道换行符应出现在何处，则可以将文本分成多个 s，每个 s 都带有并模拟实际的文本行。例如：<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中。

答案 2

我恳求你alredy设法解决了它，但如果有人正在寻找类似的解决方案，那么这对我有用：

 g.append('svg:text')
  .attr('x', 0)
  .attr('y', 30)
  .attr('class', 'id')
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 5)
  .text(function(d) { return d.name; })
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 20)
  .text(function(d) { return d.sname; })
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 20)
  .text(function(d) { return d.idcode; })

有 3 行用换行符分隔。