- From: Jeff Schiller <codedread@gmail.com>
- Date: Fri, 7 Sep 2007 11:08:47 -0500
- To: www-svg@w3.org, j.chetwynd@btinternet.com
Note that my example does not work in Renesis 0.7 - seems they haven't implemented clipping yet? On 9/7/07, Jeff Schiller <codedread@gmail.com> wrote: > On 9/7/07, Jeff Schiller <codedread@gmail.com> wrote: > > Do the following 3 points summarize your issue: > > > > - you want a "sheet" to cover the entire window > > - you want a circular hole in the sheet to allow mouse pointer events > > to reach to SVG element underneath the sheet > > - you want the hole to remain perfectly circular regardless of the window size? > > > > Jonathan, assuming the above points outline what you are after, I took > some time to adapt your SVG and Olaf's SVG into the following (uses > clipPath): > > <?xml version="1.0" ?> > <svg xmlns="http://www.w3.org/2000/svg" > xmlns:xlink="http://www.w3.org/1999/xlink" > width="100%" height="100%"> > > <defs> > <symbol id="link" viewBox="0 0 150 150"> > <circle cx="75" cy="75" r="75" /> > </symbol> > > <clipPath id="hole"> > <circle cx="35%" cy="55%" r="14%"/> > </clipPath> > </defs> > > <!-- The sheet sits in back, though it seems like it's in front > because it is not clipped like everything else --> > <rect id="sheet" x="0%" y="0%" width="100%" height="100%" fill="blue" /> > > <!-- This group contains all the rest of your SVG elements > (including the link) but it is clipped by the hole --> > <g clip-path="url(#hole)" > > <rect id="background" x="0%" y="0%" width="100%" height="100%" fill="black" /> > > <text x="20%" y="45%" fill="white">Hello, world!</text> > > <a xlink:href="http://www.peepo.co.uk"> > <use xlink:href="#link" x="30%" y="50%" width="10%" height="10%" > fill="purple" /> > </a> > > <circle id="some-other-stuff" cx="50%" cy="50%" r="10%" fill="yellow"/> > > <a id="another-link-not-clickable" xlink:href="http://www.peepo.co.uk"> > <use xlink:href="#link" x="60%" y="60%" width="10%" height="10%" > fill="red" /> > </a> > </g> > </svg> > > This technique seems to work in: > > - IE+ASV 3.03 > - Firefox 2.0+ > - Opera 9+ > - Safari 3 Beta (Windows) > > There are two issues with Safari (Windows) though: > - mouse pointer does not change when hovered over links > - when resizing window, you have to reload the document to get the SVG > elements laid out correctly (i.e. so purple circle is in the middle of > the "hole") > > Regards, > Jeff >
Received on Friday, 7 September 2007 16:08:52 UTC