- From: David Storey <dstorey@opera.com>
- Date: Wed, 13 Jul 2011 10:52:03 +0300
- To: Charles Pritchard <chuck@jumis.com>
- Cc: public-fx@w3.org
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