SVG动画不会重新启动动画

我有两个SVG动画添加到路径元素。我想mouseover和Anim1火然后mouseout和Anim2火，我想这是可重复的。我正在使用begin=X.mouseover,begin=X.mouseleave和fill="freeze"。SVG动画不会重新启动动画

它第一次运作良好;所以mouseover Anim1火灾，mouseleave Anim2火灾。但是它只会在mouseover上激发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，结果相同。

感谢寻找..

来源

2014-01-23 user1456958

您需要使用end属性的其他动画启动时完成相反的动画。

来源

2014-01-23 22:30:38

SVG动画不会重新启动动画

回答

相关问题