SVG-анимация не перезапускает анимацию

Question

У меня есть два SVG-анимата, прикрепленных к элементу пути. Я хочу навести курсор мыши и у меня есть Anim1 огонь, затем мышь и Anim2 огонь, и я хочу, чтобы это повторяемо. Я использую begin=X.mouseover, begin=X.mouseleave и fill="freeze".

Это хорошо работает в первый раз; so mouseover Anim1 fire, mouseleave Anim2 пожары. Но тогда он только будет стрелять Anim1 на mouseover и 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, с тем же результатом.

спасибо за глядя ..

Answer 1

Вы должны использовать атрибут end, чтобы закончить противоположную анимацию при запуске другой анимации.