Re: opacity, animate and mask

Hi Jonathan.

Jonathan Chetwynd:
> opacity, animate and mask
> 
> is it correct that when animate opacity equals zero, any anchored  
> link is broken?

By “broken” do you mean if you click on it, it won’t activate?  Then no,
opacity has no bearing on whether a link can be activated or not.  See
the description of the 'pointer-events' property, which has a bearing on
what pointer events will effect a hyperlink activation:

  http://www.w3.org/TR/SVG11/interact.html#PointerEvents

> this makes sense in the case where one linked image fades into the next.
> in fact it would seem essential.
> 
> However this appears to conflict with the case of mask where the  
> errata suggest that:
> "Don't want nearly transparent and fully transparent to behave  
> differently."**

If you are fading one link out and another in, then you could animate
the 'pointer-events' property to prevent the upper link from being
activated:

  <svg xmlns='http://www.w3.org/2000/svg'
       xmlns:xlink='http://www.w3.org/1999/xlink'
       width='400' height='300'>
  
    <a xlink:href='javascript:alert("blue square")'>
      <rect width='100' height='100' fill='blue' opacity='0'>
        <animate id='rectIn' attributeName='opacity' from='0' to='1'
                 begin='0s; circleOut.end + 0.5s' dur='1s'
                 fill='freeze'/>
        <animate id='rectOut' attributeName='opacity' from='1' to='0'
                 begin='rectIn.end + 1s' dur='1s' fill='freeze'/>
        <set attributeName='pointer-events' to='none'
             begin='rectOut.begin + 1s' end='rectIn.begin'/>
      </rect>
    </a>
    <a xlink:href='javascript:alert("red circle")'>
      <circle cx='50' cy='50' r='50' fill='red' opacity='0'>
        <animate id='circleIn' attributeName='opacity' from='0' to='1'
                 begin='rectOut.end + 0.5s' dur='1s' fill='freeze'/>
        <animate id='circleOut' attributeName='opacity' from='1' to='0'
                 begin='circleIn.end + 1s' dur='1s' fill='freeze'/>
        <set attributeName='pointer-events' to='none'
             begin='circleOut.begin + 1s' end='circleIn.begin'/>
      </circle>
    </a>
  
  </svg>

-- 
Cameron McCormack, http://mcc.id.au/
 xmpp:heycam@jabber.org  ▪  ICQ 26955922  ▪  MSN cam@mcc.id.au

Received on Thursday, 2 August 2007 09:13:17 UTC