Also hier ist was ich habe:
<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 ...
}
...
Jetzt hat mein sehr langer Tooltip-Text keinen Zeilenumbruch, obwohl ich alert () verwende. es zeigt mir, dass der Text tatsächlich zwei Zeilen hat. (Es enthält jedoch ein "\". Wie entferne ich dieses übrigens?)
Ich kann CDATA nirgendwo zum Laufen bringen.
javascript
svg
newline
line-breaks
sollniss
quelle
quelle
Antworten:
Dies wird von SVG 1.1 nicht unterstützt. SVG 1.2 verfügt zwar über das
textArea
Element mit automatischem Zeilenumbruch, ist jedoch nicht in allen Browsern implementiert. SVG 2 plant keine ImplementierungtextArea
, verfügt jedoch über automatisch umbrochenen Text .Da Sie jedoch bereits wissen, wo Ihre Zeilenumbrüche auftreten sollten, können Sie Ihren Text in mehrere Zeilen
<tspan>
mit jeweilsx="0"
unddy="1.4em"
zur Simulation tatsächlicher Textzeilen aufteilen. Beispielsweise:Da Sie dies über JavaScript tun möchten, müssen Sie natürlich jedes Element manuell erstellen und in das DOM einfügen.
quelle
<tspan>s
? Ersetzen? Teilt?var tspan = document.createElement('tspan') tspan.setAttribute('x','0'); tspan.setAttribute('dy','1.2em'); tspan.textContent = text; tt.appendChild(tspan);
zeigt überhaupt keinen Text.x=0
ist eine absolute Koordinate: Verschieben Sie das Textfragment an den Ursprung des aktuellen Koordinatensystems . Dastransform
Attribut für dasg
Element definiert ein neues aktuelles Koordinatensystem. Unter der Annahme, dass der Text linksbündig ist, wird der tspan nach links verschoben. Dies wirkt wie eine Wagenrücklaufanweisung.dy=1.2em
ist eine relative Koordinate: Verschieben Sie das Textfragment um diesen Betrag relativ zum aktuellen Textfragment. Dies wirkt wie eine Zeilenvorschubanweisung. Kombiniert erhalten Sie einen CR / LF.Ich nehme an, Sie haben es bereits geschafft, es zu lösen, aber wenn jemand nach einer ähnlichen Lösung sucht, dann hat dies für mich funktioniert:
Es gibt 3 Zeilen, die durch Zeilenumbruch getrennt sind.
quelle
Nehmen wir an, Sie wissen bei der tspan-Lösung nicht im Voraus, wo Sie Ihre Zeilenumbrüche platzieren sollen: Sie können diese nette Funktion verwenden, die ich hier gefunden habe: http://bl.ocks.org/mbostock/7555321
Dadurch werden automatisch Zeilenumbrüche für Langtext-SVG für eine bestimmte Breite in Pixel ausgeführt.
quelle
Ich denke das macht was du willst:
Es teilt den Text auf
\\\n
und fügt für jedes Fragment jedes Fragment in einen tspan ein. Anschließend wird die Größe des erforderlichen Felds anhand der längsten Textlänge und der Anzahl der Zeilen berechnet. Sie müssen auch das Tooltip-Textelement so ändern, dass es drei tspans enthält:Dies setzt voraus, dass Sie nie mehr als drei Zeilen haben. Wenn Sie mehr als drei Zeilen möchten, können Sie weitere tspans hinzufügen und die Länge der for-Schleife erhöhen.
quelle
"\\\n"
eher als"\n"
?Ich habe die Lösung von @steco ein wenig angepasst, die Abhängigkeit von
d3
auf umgeschaltetjquery
und dasheight
des Textelements als Parameter hinzugefügtquelle
Verwenden Sie HTML anstelle von Javascript
quelle