0

i have two SVG animate's appended to a path element. I want to mouseover and have Anim1 fire then mouseout and Anim2 fire and I want this to be repeatable. I'm using begin=X.mouseover, begin=X.mouseleave and fill="freeze".

It works well the first time around; so mouseover Anim1 fires, mouseleave Anim2 fires. But then it will only ever fire Anim1 on mouseover and Anim2 will never fire again (or at least I can't see it doing any animation).

The animations are paths do I'm animating attribute d. I've tried in Chrome and Opera, same result. 

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

I have removed the actual paths from the code block to make it easier to read.

I've also tried using beginElement & endElement, with the same result.

thanks for looking..

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
user1456958
  • 59
  • 1
  • 8

1 Answers1

0

You need to use the end attribute to finish the opposite animation when the other animation starts.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242