2012-04-30 19 views
5

Wie bekommen Sie Wörter in eine Box in RaphaelJS zu wickeln? Oder im Browser-basierten SVG im Allgemeinen?Word Wrap in Raphael JS/SVG

Ich habe this thread darauf gefunden, aber es macht keinen Sinn. Sie sagen, "widthToCharNum" zu verwenden, aber soweit ich das beurteilen kann, ist dieser Thread der einzige Ort, an dem diese Wörter jemals im Internet verwendet wurden. Sie schlagen vor, ein "width" -Attribut zu verwenden, dies hat jedoch keine Auswirkungen.

Antwort

3

Textumbruch ist nicht eingebaut in Raphael oder die SVG-Spezifikation. Zeitraum. Aus der HTML-Welt kommend, fand ich die Abwesenheit von Textumbruch ziemlich schockierend.

Sie können es jedoch ohne große Schwierigkeiten selbst tun. Details und ein Beispiel finden Sie unter this question. Leider müssen Sie einige clientseitige Zyklen brennen, damit es dynamisch funktioniert.

0

Das Tspan-Tag kann die Illusion von Wortumbruch geben, aber es gibt keine integrierte Wortumbruchfunktionalität.

Das Tspan-Tag ist identisch mit dem Text-Tag, kann aber innerhalb von Text-Tags und in sich selbst verschachtelt werden. Zusammen mit dem 'dy'-Attribut ermöglicht dies die Illusion von Wortumbruch in SVG 1.1. Beachten Sie, dass "dy" relativ zu dem zuletzt gezeichneten Zeichen (Zeichen) ist. Es gibt ein Tutorial zur Verwendung von Tspan unter http://tutorials.jenkov.com/svg/text-element.html.

Der Artikel bei http://www.xml.com/pub/a/2002/09/11/quint.html könnte auch nützlich sein.

+0

Ich sehe 'dy' an keinem dieser Orte erwähnt. Was ist es? –

1

Die svg.js Bibliothek verfügt über ein svg.textflow.js Plugin. Es ist nicht ultra schnell, aber es macht den Trick. Es speichert sogar überlaufenden Text in einem Datenattribut, so dass Sie damit kontinuierlich fließende Spalten erstellen können. Here the text flow example page.

+0

Das Beispiel sieht fantastisch aus, aber die Bibliothek scheint nicht mehr zu existieren ... Ich habe eine Nachricht an wout geschickt, um zu sehen, ob er klären kann, was hier vor sich geht, denn es sah vielversprechend aus! – Siyfion

0

Ich weiß, es ist ein bisschen verspätet, aber Sie könnten an meinem Projekt Raphael-paragraph interessiert sein.

Es ist eine kleine Bibliothek, mit der Sie automatisch umgebrochenen mehrzeiligen Text mit maximalen Beschränkungen für Breite und Höhe, Zeilenhöhe und Textstilkonfiguration erstellen können. Es ist immer noch ziemlich beta-ish und erfordert eine Menge Optimierung, aber es sollte für Ihre Zwecke funktionieren.

Anwendungsbeispiele und Dokumentation finden Sie auf der GitHub-Seite.