问题描述
我尝试在 http://jsfiddle.net/emanuensis上制作一个简单的SVG图形的SMIL动画./NNvjA/的想法是，每个mouseover单词向上或向下都会导致黄色冰球沿该方向往复运动，这由mouseout事件确定，它会短暂停止...并等待进一步的 s，从该位置开始.
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.
不幸的是，现实(在FF和Chrome中均是如此)并非如此.
Unfortunately the reality (in both FF & Chrome) is not so.
ABA的形式(其中A是任意数量的升起，B是下降-或vv)导致第二个A失效.
The form ABA (where A is any number of ups and B a down - or vv) results in a noop for the second A.
第一个A freezes该属性的值首先是在其类型(向上或向下)的最后一个事件(可能有很多总是重新归宿)上获得的值.也就是说，B从该位置开始(房屋).
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.
即使在第一个A freezes中也不加法.也就是说，每次活动都需要在穿梭之前回去.
Even in the first A freezes are not additive. Ie every event homes before shuttling.
也许还有另一种方法可以在短时间内强制执行有效的freeze(即不一直到结束-这是一个方向，而不是幅度).
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.)
在这里
<?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>.
推荐答案
您想要的是不是SMIL不幸的工作方式.
如果添加的动画处于活动或冻结状态时重新启动，则该动画的先前效果(即重新启动之前)将不再应用于该属性.特别要注意的是，累积动画仅在动画的有效时间内定义.动画重新启动时，所有累积的上下文都将被丢弃，并且动画效果F(t)从重新启动的有效持续时间的第一次迭代开始再次累积.
您可以做的是使用javascript侦听动画结束事件，然后将动画值复制回基本值.
What you could do is listen for the animation end event using javascript and copy the animated value back into the base value.
这篇关于动画中的"fill =" freeze"失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！