Re: Hey, youšve got SVG in my CSS!

Hi David, Charles,

The idea of wrap-shape (the css3 floats and css3 exclusions spec are drafts along the same idea) is to provide a shape for other content to wrap inside or outside in HTML.

My understanding of what David was originally asking is to have a way to define a viewport for the HTML fragment inserted in SVG content. This is needed for example when the content uses percentages (and wrap-shape can be defined with percentages). I think that conceptually, you do need the box that David was suggesting and I think it is a great idea that would make mixing HTML in SVG much more palatable.

Then, we could still use wrap-shape within that box, but it is a different thing.

Vincent

From: Charles Pritchard <chuck@jumis.com<mailto:chuck@jumis.com>>
Date: Wed, 13 Jul 2011 01:13:41 -0700
To: David Storey <dstorey@opera.com<mailto:dstorey@opera.com>>
Cc: "public-fx@w3.org<mailto:public-fx@w3.org>" <public-fx@w3.org<mailto:public-fx@w3.org>>
Subject: Re: Hey, you’ve got SVG in my CSS!

On 7/13/2011 12:52 AM, David Storey wrote:

> The example places HTML divs inside of SVG shapes:
> > It looks something like this (tweaked a little from the example svg):
> <svg>
> <rect x="10" y="10" width="100" height="150" fill="gray"/>
> <foreignobject x="10" y="10" width="100" height="150">
> <body xmlns="http://www.w3.org/1999/xhtml"<http://www.w3.org/1999/xhtml>>
> <div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
> </body>
> </foreignobject>
> </svg>
> > > Wouldn't it be nice to do that with less code, using CSS and a new attribute named "content-path”:


CSS3 Positioned Floats does something similar to this: http://www.interoperabilitybridges.com/css3-floats/#defining_wrap_shapes_for_floats

> > <div style="content-path: rect(10,10,100,150); background: gray">
> Here is a <strong>paragraph</strong> that requires <em>word wrap</em>
> </div>


Thank you for that link, that's very similar to what I'm talking about. I like it.
That's wrap-shape: auto | <shape> -- with shape defined as expected.

wrap-image may have some same origin issues; it could "expose" some
small amount of data bout the image contents. For instance, the user could
load an image from another domain and based on transparency, tell that the
content of the image has changed.

Are wrap-margin and wrap-padding something that works with border / outline properties?

I think that wrap-shape is pretty solid on its own; seems like it could be implemented by vendors
that already have SVG foreignObject+html implementations.

-Charles

Received on Thursday, 14 July 2011 01:43:03 UTC