Hey, you’ve got SVG in my CSS!

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":

<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

Received on Wednesday, 13 July 2011 07:05:22 UTC