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">
>> >  <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 Wednesday, 13 July 2011 08:14:10 UTC