Oto co mam:
<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 ...
}
...
Teraz mój bardzo długi tekst podpowiedzi nie ma podziału wiersza, nawet jeśli używam funkcji alert (); pokazuje mi, że tekst faktycznie ma dwie linie. (Zawiera jednak znak „\”, a tak przy okazji, jak mogę to usunąć?)
Nie mogę nigdzie zmusić CDATA do działania.
javascript
svg
newline
line-breaks
sollniss
źródło
źródło
Odpowiedzi:
To nie jest coś, co obsługuje SVG 1.1. SVG 1.2 ma ten
textArea
element z automatycznym zawijaniem słów, ale nie jest zaimplementowany we wszystkich przeglądarkach. SVG 2 nie planuje wdrożeniatextArea
, ale ma automatycznie zawijany tekst .Biorąc jednak pod uwagę, że już wie, gdzie powinien pojawić się swoimi linebreaks, można przełamać swój tekst na kilka
<tspan>
sekund, z których każdax="0"
idy="1.4em"
symulować rzeczywiste linie tekstu. Na przykład:Oczywiście, ponieważ chcesz to zrobić z poziomu JavaScript, będziesz musiał ręcznie utworzyć i wstawić każdy element do DOM.
źródło
<tspan>s
? Zastąpić? Rozdzielać?var tspan = document.createElement('tspan') tspan.setAttribute('x','0'); tspan.setAttribute('dy','1.2em'); tspan.textContent = text; tt.appendChild(tspan);
nie wyświetla w ogóle żadnego tekstu.x=0
jest współrzędną bezwzględną: przenieś fragment tekstu do początku bieżącego układu współrzędnych .transform
Atrybutu nag
elemencie określa się nowy bieżący układu współrzędnych, i przy założeniu, że treść jest wyrównany do lewej The tspan przesuwa się w lewo. Działa to jak instrukcja powrotu karetki.dy=1.2em
jest współrzędną względną : przesuń fragment tekstu o tę wartość w stosunku do bieżącego fragmentu tekstu. Działa jak instrukcja przesuwu o wiersz. W połączeniu otrzymujesz CR / LF.Podejrzewam, że udało ci się to już rozwiązać, ale jak ktoś szuka podobnego rozwiązania to u mnie zadziałało:
Istnieją 3 wiersze oddzielone podziałem wiersza.
źródło
Dzięki rozwiązaniu tspan powiedzmy, że nie wiesz z góry, gdzie wstawiać znaki końca linii: możesz użyć tej fajnej funkcji, którą znalazłem tutaj: http://bl.ocks.org/mbostock/7555321
To automatycznie powoduje podziały wierszy dla długiego tekstu svg dla danej szerokości w pikselach.
źródło
Myślę, że robi to, co chcesz:
Dzieli tekst
\\\n
i dla każdego umieszcza każdy fragment w tspan. Następnie oblicza wymagany rozmiar pola na podstawie najdłuższej długości tekstu i liczby wierszy. Będziesz także musiał zmienić element tekstowy podpowiedzi tak, aby zawierał trzy tspan:Zakłada się, że nigdy nie masz więcej niż trzy linie. Jeśli chcesz mieć więcej niż trzy wiersze, możesz dodać więcej łyżeczek i zwiększyć długość pętli for.
źródło
"\\\n"
a nie"\n"
?Dostosowałem nieco rozwiązanie @steco, przełączając zależność z
d3
najquery
i dodającheight
element tekstowy jako parametrźródło
używaj HTML zamiast javascript
źródło