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

On 13 Jul 2011, at 10:04, Charles Pritchard wrote:

> CSS has some excellent shorthand properties, and SVG foreignObject support in browsers
> has really demonstrated vendor ability to handle flowing HTML content within SVG shapes.
> 
> I'd like to see SVG in my CSS. Consider the example from this old article:
> http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg
> http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-text.svg
> http://ajaxian.com/wp-content/uploads/foreignobject1.png
> 
> 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>

> There have been many successful transplants of SVG attributes into CSS.
> This could be another, and it appears vendors have the skills to do this
> with circle and rect.
> 
> The following example shows SVG transforms with foreignObject,
> and is most certainly easier to write and read using modern CSS transforms directly on the iframe style:
> http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-transform.svg
> 
> I'd like to hear feedback from vendors on this SVG borrowing:
> using a new css attribute called content-path instead of using svg+foreignObject
> for html content flow.
> 
> 
> 
> -Charles

-- 
David Storey

Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG:  SVG Interest Group 

Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: dstorey@opera.com / Twitter: dstorey

Received on Wednesday, 13 July 2011 07:52:24 UTC