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動畫不會重新啓動動畫

回答

相關問題