☰

JavaScript 内で SVG テキストを改行するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript svg newline line-breaks
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 ...
}
...

現在、非常に長いツールチップ テキストには改行がありません。ただし、alert(); を使用すると、テキストが実際には 2 行あることが示されます。(ただし、"\" が含まれていますが、これを削除するにはどうすればよいですか?)
CDATA をどこでも動作させることができません。

ベストアンサー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 に挿入する必要があります。

おすすめ記事