Mousedriven hover-animations in SVG/SMIL-animation

Hello www-smil!

Try the included example in for example Opera 9.5  
(http://my.opera.com/desktopteam), or another viewer that supports  
declarative animations (like Batik 1.7 for example).

I'd be happy to hear if it's possible to do something like this:

   desired behavior:
      Mousing over either of the rects have it fade in (the fade should  
last 0.25s or until the mouse leaves).
      At the point the mouse leaves one of the rects it should fade back to  
opacity=0.5
      (the fade should last 0.25s or until the mouse enters).

   If there was a way to reference the current animated value something  
like this might solve the problem:
      <animate attrbuteName="opacity" from="animation-snapshot-value"  
to="1" begin="mouseover" end="mouseout" dur="0.25s"/>
      <animate attrbuteName="opacity" from="animation-snapshot-value"  
to="0.5" begin="mouseout" end="mouseover" dur="0.25s"/>

      The problem with the below experiment is that the out[12] animations  
trigger after 0.25s.
      And the in[12] animations need a duration because the animation  
should play for 0.25s and then freeze.

Example:

<svg xmlns="http://www.w3.org/2000/svg">

   <rect width="100" height="100" fill="blue" opacity="0.5">
     <animate id="in1" attributeName="opacity" begin="mouseover"  
end="mouseout" dur="0.25s" to="1" fill="freeze"/>
     <animate id="out1" attributeName="opacity" begin="in1.endEvent"  
to="0.5" dur="0.25s"/>
   </rect>
   <rect width="100" height="100" fill="green" x="110" opacity="0.5">
     <animate id="in2" attributeName="opacity" begin="mouseover"  
end="mouseout" dur="0.25s" to="1" fill="freeze"/>
     <animate id="out2" attributeName="opacity" begin="in2.endEvent"  
to="0.5" dur="0.25s"/>
   </rect>
</svg>

-- 
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

Received on Monday, 5 November 2007 22:49:17 UTC