所以这是我所拥有的:
<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。
SVG 1.1不支持此功能。SVG 1.2确实具有textArea自动换行的元素,但并非在所有浏览器中都实现。SVG 2 并未计划实现textArea,但确实具有自动包装的文本。
textArea
但是,鉴于您已经知道换行应在何处发生,可以将文本分成多个<tspan>,每个都带有x="0"和dy="1.4em"来模拟实际的文本行。例如:
<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。