failure of `fill=“freeze”` in animation

问题

i have an attempt at a SMIL animation of a simple SVG figure at http://jsfiddle.net/emanuensis/NNvjA/ The idea is that every mouseover the words up or down will cause the yellow puck to shuttle in that direction stoping a short ways, determined by the mouseout event ... and await further mouseovers, from that location.

Unfortunately the reality (in both FF & Chrome) is not so.

The form ABA (where A is any number of ups and B a down - or vv) results in a noop for the second A.

The first A freezes the value of the attribute at the first the value attained on the last event (there may be many always homeing anew) of its type (up or down). Ie the B starts (homes) from that position.

Even in the first A freezes are not additive. Ie every event homes before shuttling.

Perhaps there is another way of forcing an effective freeze for a short duration (ie not all the way to the end - which is a direction, not a magnitude.)

here da fiddly

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="400" height="500"
   version="1.1">
<text id="tup" x="48 " y="33" >up  </text>
<text id="tdn" x="235" y="33" >down</text>
 <rect id="trect" style="fill:yellow;stroke:red;"
         width="20" height="20" x="75" y="0" rx="5" ry="5" >
<animate id="tr"
   begin="tdn.mouseover"
   end="tdn.mouseout+1s"
   attributeName="x"
   additive="sum"
   fill = "freeze"
   restart = "whenNotActive"
   from=""
   to="50"
   dur="3s"
   repeatCount="1" />
  <animate id="rt"
   begin="tup.mouseover"
   end="tup.mouseout+1s"
   attributeName="x"
   additive="sum"
   fill = "freeze"
   restart = "whenNotActive"
   from=""
   to="250"
   dur="3s"
   repeatCount="1"/>
  </rect>
</svg>.

回答1:

What you want is not how SMIL works unfortunately.

If an additive animation is restarted while it is active or frozen, the previous effect of the animation (i.e. before the restart) is no longer applied to the attribute. Note in particular that cumulative animation is defined only within the active duration of an animation. When an animation restarts, all accumulated context is discarded, and the animation effect F(t) begins accumulating again from the first iteration of the restarted active duration.

What you could do is listen for the animation end event using javascript and copy the animated value back into the base value.

来源：https://stackoverflow.com/questions/20873466/failure-of-fill-freeze-in-animation