Cool demo,thanks!
>This is NOT a simple operation, for a single SVG <text> element creates a
single line of text. It does not,
> AFAIK, have any way cutting text to a new line. CR or LF do not work.
<tspan> neither. Have a look at:
I haven't looked at your code enough to know if what I'm going to say
applies, but here goes. First, for background, I think that everyone has
the same reaction when learning that SVG doesn't support line breaks, or
word wrapping in text. The response is "What? That can't possibly be
right." Yeah, well it is right. Call it an unfortunate accident of history.
Version 1.2 does have a textArea object that Miyako mentions. This supports
text wrap, but I don't know how widely supported it is. SVG 2 (not
released) supports wrapping and other text handling behavior by explicitly
wedging in the relevant sections of the CSS standard. That seems like a
good thing (as does any sort of harmonization between SVG and CSS, thee are
some needless inconsistencies at the moment on attribute names.)
Anyway, the most typical solution (I guess) so far is to:
* Break the text into lines via JavaScript (or 4D in our case).
* Use an outer <text> element to defined the overall style and starting
position of the text.
* Nest a series of <tspan> 'lines' within the <text> element.
That's a pretty conventional use of <tspan> - an element that only I
believe only ever exists as a child of <text>. Since it's a nested element,
you get to enjoy all of SVG's nice behaviors regarding relative
positioning. You don't have to worry about the overall SVG, just the
<text>. Additionally, tspan elements are meant to be organized relative to
other tspan elements so they support delta offsets (dx and dy in SVG
terminology) to make it easy to do things like make what looks like a
normal text flow. Something like this:
<text y="20">
<tspan x="10">tspan line 1</tspan>
<tspan x="10" dy="15">tspan line 2</tspan>
<tspan x="10" dy="15">tspan line 3</tspan>
</text>
To give you:
tspan line1
tspan line2
tspan line3
I can see from the demo code that there's directly XML manipulation instead
of 4D's SVG toolkit. So, there's no limit on what sort of XML/SVG can be
generated.
Here's a bit on tspan from my favorite SVG site. It's not the prettiest
site in the universe, but the content is excellent:
http://tutorials.jenkov.com/svg/tspan-element.html
For those of you that follow JPRs example and write SVG directly (or adapt
his code), a few advantages and thoughts.
* It's easy to 'transform' block elements like a <g> (group) object. You
might have a legend with a couple of squares and a text area with several
tspan lines of text. These can be rotated, scaled, and moved together very,
very easily.
* If you've got reusable elements - some kind of picture, group of items,
or some text - you can define them and then reuse them throughout the SVG.
It makes it a lot simpler to construct when you're pretty much saying
"copy" instead of building the same thing repeatedly from scratch. Look for
<defs> and <symbol>. Actually, look at <use> and work back from there as
you'll find it's even more flexible than I've described.
* CSS is your friend. (Your weird, confusing, somewhat misguided friend,
granted.) There's a ton of ways that you can leverage CSS in SVG to make
styling and various behaviors easier.
* A great thing about SVG is that it's vector-based. So, you get all sorts
of helpful behaviors when scaling, particularly like text. If you don't
need those advantages, a static rendering may be just the thing - like
JPR's tool produces. If you're doing down that road, another alternative is
HTML 5's Canvas. This is a pure JavaScript+browser play, but what you get
is a bitmap. On the upside, you get GPU acceleration with Canvas (WebGL is
GPU-accelerated.) I haven't used Canvas apart from a few toy tests, but it
looks like it only takes a couple of lines of code to convert Canvas to an
image. I'm sticking with SVG for the moment.
**********************************************************************
4D Internet Users Group (4D iNUG)
FAQ: http://lists.4d.com/faqnug.html
Archive: http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub: mailto:[email protected]
**********************************************************************
