Ich möchte <text>
in SVG anzeigen, was automatisch in Zeilen um den Container gewickelt wird, <rect>
genauso wie HTML-Text <div>
Elemente füllt . Gibt es eine Möglichkeit, dies zu tun? Ich möchte Linien nicht sparsam mit <tspan>
s positionieren .
108
Hier ist eine Alternative:
Es wird darauf hingewiesen, dass, obwohl ForeignObject möglicherweise von diesem Feature unterstützt wird, keine Garantie dafür besteht, dass HTML angezeigt werden kann, da dies in der SVG 1.1-Spezifikation nicht erforderlich ist. Derzeit gibt es keine Möglichkeit für die Unterstützung von HTML-in-Foreign-Objekten. Es wird jedoch in vielen Browsern weiterhin unterstützt, sodass es wahrscheinlich in Zukunft erforderlich sein wird, möglicherweise mit einem entsprechenden Merkmal.
Beachten Sie, dass das 'textArea'-Element in SVG Tiny 1.2 alle Standard-SVG-Funktionen unterstützt, z. B. erweiterte Füllung usw., und dass Sie entweder Breite oder Höhe als automatisch angeben können, was bedeutet, dass der Text frei in diese Richtung fließen kann. ForeignObject fungiert als Clipping-Ansichtsfenster.
Hinweis: Während das obige Beispiel gültiger SVG 1.1-Inhalt ist, wurde in SVG 2 das Attribut 'requiredFeatures' entfernt. Dies bedeutet, dass das Element 'switch' versucht, das erste Element 'g' zu rendern, unabhängig davon, ob SVG 1.2 'textArea unterstützt wird 'Elemente. Siehe SVG2-Schalterelementspezifikation .
quelle
xhtml:div
stattdessen verwendendiv
, aber das könnte an d3.js liegen. Ich konnte keine nützliche Referenz zu TextFlow finden. Existiert es (noch) oder war es nur in einem Entwurf?Der textPath kann in einigen Fällen gut sein.
quelle
Aufbauend auf dem Code von @Mike Gledhill bin ich noch einen Schritt weiter gegangen und habe weitere Parameter hinzugefügt. Wenn Sie ein SVG RECT haben und möchten, dass Text darin eingeschlossen wird, kann dies nützlich sein:
quelle
boxwidth = parseInt(boxObject.getAttribute('width'))
würde nur die Breite in Pixel akzeptieren, während ichboxwidth = parseInt(boxObject.getBBox().width)
jede Art von Maßeinheit akzeptieren würdeDiese Funktionalität kann auch mit JavaScript hinzugefügt werden. Carto.net hat ein Beispiel:
http://old.carto.net/papers/svg/textFlow/
Etwas anderes, das auch nützlich sein könnte, sind bearbeitbare Textbereiche:
http://old.carto.net/papers/svg/gui/textbox/
quelle
Der folgende Code funktioniert einwandfrei. Führen Sie das Code-Snippet aus, was es tut.
Möglicherweise kann es bereinigt werden oder automatisch mit allen Text-Tags in SVG funktionieren.
quelle
Ich habe die folgende exemplarische Vorgehensweise zum Hinzufügen eines falschen Zeilenumbruchs zu einem SVG-Textelement hier veröffentlicht:
SVG Word Wrap - Stopper anzeigen?
Sie müssen nur eine einfache JavaScript-Funktion hinzufügen, die Ihre Zeichenfolge in kürzere "tspan" -Elemente aufteilt. Hier ist ein Beispiel dafür, wie es aussieht:
Hoffe das hilft !
quelle