Re: opacity, animate and mask

Cameron,
thanks for your considered and easily understood response, I was  
referring to the simple case where the 'pointer-events' property is  
not defined.

In tests it seems to me that using Opera, your explanation whilst  
possibly correct is not what happens.

There should be an agreed default behaviour, which should include  
opacity and animate.
In my tests opacity is relevant, and that seems natural and expected  
to me

Please can you reconsider and let me know?
are there other UAs that support animate and opacity?

I'll develop and forward a reduced testcase

cheers

Jonathan Chetwynd



On 2 Aug 2007, at 10:12, Cameron McCormack wrote:


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 17:26:52 UTC