- From: Jeff Schiller <codedread@gmail.com>
- Date: Fri, 7 Sep 2007 11:03:00 -0500
- To: www-svg@w3.org, j.chetwynd@btinternet.com
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:03:14 UTC