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

(unknown charset) Re: 3rd Call: WhyTo make a 100% sheet with a hole in it that reveals a link

From: (unknown charset) ~:'' ありがとうございました。 <j.chetwynd@btinternet.com>
Date: Sat, 8 Sep 2007 14:25:20 +0100
Message-Id: <C0BAEF36-6DFA-4FD2-BB16-38805AC95B28@btinternet.com>
Cc: (unknown charset) Jeff Schiller <codedread@gmail.com>, SVG List <www-svg@w3.org>
To: (unknown charset) ~:'' ありがとうございました。 <j.chetwynd@btinternet.com>


that's a dinner I owe you.

a beautiful solution that allows for multiple holes**.
had been avoiding me for some weeks.

might benefit from your contributions

thanks again!

Jonathan Chetwynd
Accessibility Consultant on Media Literacy and the Internet

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"
      width="100%" height="100%">

   <symbol id="link" viewBox="0 0 150 150">
     <circle cx="75" cy="75" r="75" />

   <clipPath id="hole">
     <circle cx="37%" cy="55%" r="12%"/>
     <circle cx="57%" cy="55%" r="12%"/>

   <!-- 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="20%" y="50%" width="10%" height="10%"
fill="purple" />

   <circle id="some-other-stuff" cx="50%" cy="50%" r="10%"  

   <a id="another-link-not-clickable" xlink:href="http:// 
     <use xlink:href="#link" x="60%" y="60%" width="10%" height="10%"
fill="red" />

Received on Saturday, 8 September 2007 13:25:40 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:47:11 UTC