Loading ...
Sorry, an error occurred while loading the content.

clip-path applied to iframe

Expand Messages
  • David Dailey
    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
    Message 1 of 1 , Apr 17, 2014
    • 0 Attachment

      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

      }

    Your message has been successfully submitted and would be delivered to recipients shortly.