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:03:00 -0500
Message-ID: <da131fde0709070903n78771b20n1c87ca3acf055ac1@mail.gmail.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:37 GMT