W3C home > Mailing lists > Public > www-svg@w3.org > September 2007

Re: 3rd Call: HowTo make a 100% sheet with a hole in it that reveals a link

From: Jeff Schiller <codedread@gmail.com>
Date: Fri, 7 Sep 2007 11:08:47 -0500
Message-ID: <da131fde0709070908v1000217cyf89cf2ba34fe40a0@mail.gmail.com>
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

This archive was generated by hypermail 2.3.1 : Wednesday, 10 December 2014 19:59:27 UTC