javascript - Word Wrap in Raphael JSSVG - Stack Overflow

admin管理员组

文章数量:1356234

How do you get words to wrap inside a box in RaphaelJS? Or in browser-based SVG in general?

I found this thread on it, but it doesn't make any sense. They say to use "widthToCharNum" but as far as I can tell, this thread is the only place those words have ever been used on the internet. They suggest using a "width" attribute, but this has no effect.

How do you get words to wrap inside a box in RaphaelJS? Or in browser-based SVG in general?

I found this thread on it, but it doesn't make any sense. They say to use "widthToCharNum" but as far as I can tell, this thread is the only place those words have ever been used on the internet. They suggest using a "width" attribute, but this has no effect.

• javascript
• browser
• svg
• raphael

Share Improve this question Follow asked Apr 30, 2012 at 4:47 Nick RetallackNick Retallack 19.6k1919 gold badges9494 silver badges116116 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Text-wrapping is not built into Raphael or the SVG spec. Period. Coming from the HTML world, I found the absence of text wrapping pretty shocking.

However, you can do it yourself without too much difficulty. See this question for details and an example. Unfortunately, you have to burn some client-side cycles to make it work dynamically.

The svg.js library has a svg.textflow.js plugin. It's not ultra fast but it does the trick. It even stores overflowing text in a data attribute so you can use it to create continuously flowing columns. Here the text flow example page.

The tspan tag can give the illusion of word wrap, but there is no built in word wrap functionality.

The tspan tag is identical to the text tag but can be nested inside text tags and inside itself. Coupled with the 'dy' attribute this allows the illusion of word wrap in SVG 1.1. Note that 'dy' is relative to the last glyph (character) drawn. There is a tutorial on how to use tspan at http://tutorials.jenkov./svg/text-element.html.

The article at http://www.xml./pub/a/2002/09/11/quint.html might also be useful.

I know it's a little belated now, but you might be interested in my Raphael-paragraph project.

It's a small library that allows you to create auto-wrapped multiline text with maximum width and height constraints, line height and text style configuration. It's still quite beta-ish and requires a lot of optimization, but it should work for your purposes.

Usage examples and documentation are provided on the GitHub page.

本文标签： javascriptWord Wrap in Raphael JSSVGStack Overflow