Итак, вот что у меня есть:
<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 работать где угодно.
javascript
svg
newline
line-breaks
Sollniss
источник
источник
Ответы:
SVG 1.1 не поддерживает это. В SVG 1.2 есть
textArea
элемент с автоматическим переносом слов, но он реализован не во всех браузерах. SVG 2 не планирует внедрятьtextArea
, но у него есть автоматический перенос текста .Однако, учитывая, что вы уже знаете, где должны происходить разрывы строк , вы можете разбить текст на несколько
<tspan>
s, каждый сx="0"
иdy="1.4em"
для имитации фактических строк текста. Например:Конечно, поскольку вы хотите сделать это из JavaScript, вам придется вручную создавать и вставлять каждый элемент в DOM.
источник
<tspan>s
? Заменить? Трещина?var tspan = document.createElement('tspan') tspan.setAttribute('x','0'); tspan.setAttribute('dy','1.2em'); tspan.textContent = text; tt.appendChild(tspan);
вообще не показывает никакого текста.x=0
- абсолютная координата: переместить фрагмент текста в начало текущей системы координат .transform
Атрибут наg
элемент определяет новый текущей системы координат, и при условии , что текст выравнивается по левому краю, то tspan перемещается влево. Это действует как инструкция возврата каретки.dy=1.2em
- относительная координата: переместить фрагмент текста на эту величину относительно текущего фрагмента текста. Это действует как инструкция перевода строки. В сочетании вы получаете CR / LF.Я полагаю, вам уже удалось это решить, но если кто-то ищет подобное решение, то это сработало для меня:
Есть 3 строки, разделенные переносом строки.
источник
Предположим, что с помощью решения tspan вы не знаете заранее, где разместить разрывы строк: вы можете использовать эту замечательную функцию, которую я нашел здесь: http://bl.ocks.org/mbostock/7555321
Это автоматически делает разрывы строк для длинного текста svg для заданной ширины в пикселях.
источник
Я думаю, это то, что вы хотите:
Он разбивает текст
\\\n
и для каждого помещает каждый фрагмент в tspan. Затем он вычисляет размер необходимого поля на основе максимальной длины текста и количества строк. Вам также нужно будет изменить текстовый элемент всплывающей подсказки, чтобы он содержал три tspans:Это предполагает, что у вас никогда не бывает больше трех строк. Если вам нужно больше трех строк, вы можете добавить больше tspans и увеличить длину цикла for.
источник
"\\\n"
скорее чем"\n"
?использовать HTML вместо javascript
источник
Я немного адаптировал решение @steco, переключив зависимость с
d3
наjquery
и добавивheight
текстового элемента в качестве параметраисточник