- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 16 Sep 2013 14:16:01 -0700
- To: David Dailey <ddailey@zoominternet.net>
- Cc: www-style list <www-style@w3.org>
On Tue, Sep 10, 2013 at 5:42 AM, David Dailey <ddailey@zoominternet.net> wrote: > Thanks for your answer, but I'm still having a hard time visualizing what the actual code would look like to flow text into an SVG <rect> that already, let us say, has a pattern and a filter. If I understand it correctly, one would have to declare the <rect> redundantly, once as a rect, and once as a CSS rectangle([<length>|<percentage>][, [<length>|<percentage>]] that seems to have no x or y attributes. How would one bind the rectangle to the <rect>, if, say, the <rect> were animated on its x and its width attributes? A <use>? How or why does the alpha channel enter the picture? It all seems rather complex, without an example of what the code for this sort of simplest of use cases (the SVG textArea) would look like. I think you're confused about what the purpose of this feature is. If you're using SVG to draw something, and want to flow text, use the <text> element as normal. SVG2 is adding the ability to use the CSS text-layout model, which'll help a lot. The CSS Shapes spec also allows you to specify non-rectangular shapes for a box, and have the content inside and outside flow accordingly. Shapes level 1 defines shape-outside, which lets you change the outer shape of floats (and exclusions, once they're supported), so that text outside of the float will flow around the given shape. Shapes level 2 defines shape-inside, allowed on any element, which makes the text *inside* the element flow around the given shape. Turning back to SVG, you'd use this by first creating a <text width="XXX">...</text>. The width='' attribute opts it into the CSS text-layout model, flowing it into a rectangle of the given width (and whatever height it ends up with, unless you specify height='' as well). Then you can apply the shape-inside property to it, to get it to change its shape to whatever you desire. Alternately, you could do the same with a <p> or <div> or whatever element in HTML. ~TJ
Received on Monday, 16 September 2013 21:16:47 UTC