2012-04-30 11 views
5

Come si ottengono le parole da avvolgere in una scatola in RaphaelJS? O in SVG basato su browser in generale?Word Wrap in Raphael JS/SVG

Ho trovato this thread su di esso, ma non ha alcun senso. Dicono di usare "widthToCharNum" ma, per quanto posso dire, questo thread è l'unico posto in cui le parole sono mai state usate su Internet. Suggeriscono di usare un attributo "larghezza", ma ciò non ha alcun effetto.

risposta

3

Il testo non è incorporato in Raphael o le specifiche SVG. Periodo. Venendo dal mondo dell'HTML, ho trovato l'assenza di testo avvolgente piuttosto scioccante.

Tuttavia, puoi farlo da solo senza troppe difficoltà. Vedi this question per dettagli e un esempio. Sfortunatamente, è necessario masterizzare alcuni cicli sul lato client per farlo funzionare dinamicamente.

0

Il tag tspan può dare l'illusione di un ritorno a capo automatico, ma non è presente una funzionalità di wrap incorporata.

Il tag tspan è identico al tag di testo ma può essere annidato all'interno di tag di testo e al suo interno. Accoppiato con l'attributo 'dy' questo consente l'illusione del wrap di parole in SVG 1.1. Nota che 'dy' è relativo all'ultimo glifo (carattere) disegnato. C'è un tutorial su come usare tspan a http://tutorials.jenkov.com/svg/text-element.html.

Potrebbe anche essere utile l'articolo http://www.xml.com/pub/a/2002/09/11/quint.html.

+0

Non vedo "dy" menzionato in nessuno di questi luoghi. Che cos'è? –

1

La libreria svg.js ha un plug-in svg.textflow.js. Non è ultraveloce ma fa il trucco. Memorizza anche il testo traboccante in un attributo dati in modo da poterlo utilizzare per creare colonne a flusso continuo. Here the text flow example page.

+0

L'esempio sembra fantastico, ma la libreria non sembra più esistere ... Ho inviato un msg per verificare se è in grado di chiarire cosa sta succedendo, poiché sembrava promettente! – Siyfion

0

So che ora è un po 'tardivo, ma potresti essere interessato al mio progetto Raphael-paragraph.

È una piccola libreria che consente di creare testo multilinea con avvolgimento automatico con limiti di larghezza e altezza massimi, altezza della linea e configurazione dello stile del testo. È ancora abbastanza beta-ish e richiede molta ottimizzazione, ma dovrebbe funzionare per i tuoi scopi.

Esempi di utilizzo e documentazione sono disponibili nella pagina GitHub.