动画中的`fill="freeze"`失败答案

【问题标题】：failure of `fill="freeze"` in animation动画中的`fill="freeze"`失败
【发布时间】：2014-01-19 08:11:24
【问题描述】：

我在http://jsfiddle.net/emanuensis/NNvjA/ 尝试了一个简单的 SVG 图形的 SMIL 动画，这个想法是每个mouseover 向上或向下的单词都会导致黄色冰球朝那个方向穿梭，停在一小段路，由mouseout 事件...并从该位置进一步等待mouseovers。

不幸的是，现实（在 FF 和 Chrome 中）并非如此。

ABA 形式（其中 A 是任意数量的 ups，B 是 down - 或 vv）导致第二个 A 的 noop。

第一个freezes属性的值在第一个它的类型（向上或向下）的最后一个事件（可能有许多总是重新归位）上获得的值。即 B 从那个位置开始（家）。

即使在第一个 A freezes 中也没有加法。即每一个活动在穿梭之前都会回家。

也许还有另一种方法可以在短时间内强制有效freeze（即不是一直到结束 - 这是一个方向，而不是一个幅度。）

这里很繁琐

<?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>

【问题讨论】：

标签： svg exit svg-animate smil

【解决方案1】：

你想要的是not how SMIL works unfortunately。

如果附加动画在激活或冻结时重新启动，则动画的先前效果（即重新启动之前）不再应用于属性。请特别注意，累积动画仅在动画的活动持续时间内定义。当动画重新开始时，所有累积的上下文都被丢弃，动画效果F(t)从重新开始的活动持续时间的第一次迭代开始重新累积。

您可以做的是使用 javascript 监听动画结束事件并将动画值复制回基值。

【讨论】：