clip-path applied to iframe

Does anyone have an example of a dynamically built clipPath being applied to
an iframe (either through CSS or SVG)?

 

I tried something like the following in which O refers to an SVG path
element (that will provide the geometry through a CSS clip-path.
Unfortunately,  I can get it working in no browsers.

 

It does succeed in building an iframe with textarea equal in size roughly to
the polygon, O, provided, but I cannot figure out a way to clip the
resulting iframe. I even tried applying the clip-path directly through CSS.

 

The document I am working with works in all browsers except for Chrome (a
bug has been reported) and the iframe and textarea conform to the bounding
box of the polygon in all browsers except for Chrome

 

An example of these documents is
http://cs.sru.edu/~ddailey/fonts/saved/saved84.htm 

It is output from http://cs.sru.edu/~ddailey/fonts/TansY1.htm that has been
hand-cleaned a bit. Chrome draws the tessellation, just fine, by the way.

 

Thanks for any pointers - I was working from Dirk Schultze's examples at
http://www.html5rocks.com/en/tutorials/masking/adobe/ but he does it all
with straight CSS rather than using JavaScript to assign the clip. If the
above approach doesn't work then I suppose I will have to use foreignObject,
which of course doesn't work in IE, but then they don't access SVG.innerHTML
anyhow, so their utility as an authoring environment is already out the
window. Nonetheless it would be nice if IE could play the content created
elsewhere.

 

Of course in Tansy (the app that generates this stuff, the text flows into
the polygon, but currently that only works with predefined texts)

 

Cheers and thanks

David

 

function makeIframe(O){

                                var BB=O.getBBox()

                                var x=BB.x

                                var y=BB.y

                                var w=BB.width

                                var h=BB.height

                                var IFR=document.createElement("iframe")

                                IFR.src = 'about:blank'; 

                                IFR.style.width=w+10

                                IFR.style.height=h+10

                                IFR.style.position="absolute"

                                IFR.style.left=x-5

                                IFR.style.top=y-5

                                var id="url(#"+O.id+")"

                                alert(id)

                                IFR.style.clipPath="url(#I0:3C3:11C11:15)";

                                IFR.id="F"+x+y+w+h

 

 
//IFR.style="position:absolute;border:none;width:"+w+"; height:"+h+";
left:"+x+"; top:"+y

                                //above only works in Firefox: not sure why

                                document.body.appendChild(IFR)

                                Idoc=IFR.contentWindow.document

                                Idoc.open('text/html', 'replace');

                                T=Idoc.createElement("textarea")

                                T.id="T"+x+y+w+h

                                T.setAttribute("style",
"left:0;top:0;height: 100%;width:100%;padding: 0px;margin: 0px;")

                                T.addEventListener("mousedown",
function(){closeit(this)}, false);

                                B=Idoc.createElement("body")

                                B.appendChild(T)

                                Idoc.appendChild(B)

                                Idoc.close();

                                return IFR

}