SVG 动画不会重新触发动画答案

【问题标题】：SVG animation won't re-fire animationSVG 动画不会重新触发动画
【发布时间】：2014-01-23 20:16:07
【问题描述】：

我有两个 SVG 动画附加到路径元素。我想将鼠标悬停并让Anim1 触发然后mouseout 和Anim2 触发，我希望这是可重复的。我正在使用begin=X.mouseover、begin=X.mouseleave 和fill="freeze"。

它第一次运行良好；所以 mouseover Anim1 会触发，mouseleave Anim2 会触发。但是它只会在鼠标悬停时触发Anim1，而Anim2 将永远不会再次触发（或者至少我看不到它做任何动画）。

动画是路径，我正在动画属性d。我在 Chrome 和 Opera 中尝试过，结果相同。

<path class="js-sector-rollover" id="sector1" x="400" y="431" fill="#7a596a" stroke="#3a596a" d="REMOVED">
    <animate id="animOut" attributeName="d" begin="sector1.mouseover" dur="1.2s"
             from="REMOVED" calcMode="spline" keySplines="0.25 0.1 0.25 1" 
             keyTimes="0;1" fill="freeze" restart="whenNotActive"></animate>
    <animate id="animIn" attributeName="d" begin="sector1.mouseout" dur="1.2s"
             from="REMOVED" calcMode="spline" keySplines="0.25 0.1 0.25 1" 
             keyTimes="0;1" fill="freeze" restart="whenNotActive"></animate>
</path>

我已从代码块中删除了实际路径以使其更易于阅读。

我也尝试过使用beginElement 和endElement，结果相同。

感谢观看..

【问题讨论】：

标签： svg svg-animate smil

【解决方案1】：

当另一个动画开始时，你需要使用end属性来完成对面的动画。

【讨论】：