0

How come this SVG pie timer animation dies upon completion in Chrome? Works fine in Firefox.

http://jsfiddle.net/xgjpL3bg/14/

HTML:

<div class="test">
    <div class="pie">
        <svg id="me" viewBox="0 0 350 350">
            <path d="M 175, 175 m 0, -75 a 75, 75 0 1, 0 0, 150 a 75, 75 0 1, 0 0, -150" fill="none" stroke="#ccc" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
                <animate id="halt" attributeName="stroke-dashoffset" from="125" to="125" dur="1ms" fill="freeze" />
                <animate id="action" begin="indefinite" attributeName="stroke-dashoffset" from="125" to="600" dur="2s" fill="freeze" />
            </path>
        </svg>
    </div>
</div>

JS:

function resetPie() {
  $('#action')[0].endElement();
  $('#halt')[0].beginElement();
}

$('.test').bind('mouseenter', function() {
    $('#action')[0].beginElement();  
}).mouseleave(resetPie);

$('#action').on('endEvent', resetPie);
Mark Boulder
  • 13,577
  • 12
  • 48
  • 78
  • These are typically quite fiddly. Having two animations with variable start begin and ends, can get tricky. Firstly I think some browsers don't handle things like beginElement well (or at all), then you have to figure out what state an animation is in before it starts as well as during and after (especially with freeze). I think its a worthwhile experience learning, but if you have a lot of things like this, you may find it better using a library like Raphael/Snap if you get stuck for too long or no one has a solution. – Ian Sep 07 '14 at 11:40
  • I'm willing to check out Snap as I've been fiddling with this for way too long now. Remember all the other times you've helped me with this exact same issue? Although my code is a lot simpler this time around. Any chance you could throw up a demo at your Snap Dabbles page? – Mark Boulder Sep 07 '14 at 11:47
  • Might Snap also relieve me of this issue I wonder? http://stackoverflow.com/questions/25319325/fully-round-svg-circle-in-chrome-bug-workaround – Mark Boulder Sep 07 '14 at 11:49

1 Answers1

1

I think its worth using Raphael or Snap (or one of the other SVG libraries) when it comes to start/restarting animations. The main reason is, its quite fiddly to control with beginElement. Last I checked, browser support wasn't very well covered. Also you have to think about the states of svg animations otherswise when you use things like fill and freeze, and it becomes a bit unintuitive, so you can waste quite a long time on it.

Using Snap you could probably do something like...

var myPath = s.select("#mypath");

function reset( el ) {
    el.stop(); // stop any existing animation on that element
    el.attr({ "stroke-dashoffset": 125 });
};

function startAnim( el ) {
    el.animate( { "stroke-dashoffset": 600 }, 1000 );
};

s.mouseover( function() {
   startAnim( myPath );
} );

s.mouseout( function() {
   reset( myPath );
} );

You probably want to swap in the last 2 mouse events with a JQuery handler if you want them to operate on the div (as otherwise they may reset when the animation runs if mouse is in place over an animating svg, but it should highlight the structure).

jsfiddle

Ian
  • 13,724
  • 4
  • 52
  • 75
  • Pretty cool - thank you so much. This code is way simpler and more intuitive. However - 1) is there a way to make it fully round in Chrome? 2) On load (Firefox and Chrome), half the pie is visible, and sometimes on hover it animates the wrong way. – Mark Boulder Sep 07 '14 at 20:44
  • Do you mean you want it to start fully displayed ? – Ian Sep 08 '14 at 06:36
  • Hi there! Well, it would be great if it could be invisible by default like in the original fiddle and then appear and start animating on hover. Please see the updated question for how your fiddle currently looks like. – Mark Boulder Sep 08 '14 at 14:34
  • 1
    Just add the reset to be called first thing, like http://jsfiddle.net/rv73g1dw/4/ – Ian Sep 08 '14 at 15:06
  • Feel like I just gotta thank you a second time. This has been an age-old problem of mine :) – Mark Boulder Sep 09 '14 at 11:27
  • Greetings Ian! Quick follow-up: I just scaled the path down a little because it was too big, but how do I center it? No luck with flexbox: http://jsfiddle.net/0vwkL18p/4/ – Mark Boulder Jun 12 '15 at 10:52
  • You can find the centre of any Snap element, with element.getBBox() (look at this in console.log, and you will see it has cx,cy, x,y etc) – Ian Jun 12 '15 at 11:55
  • Perhaps we misunderstood each other -- I'm trying to center the `` animation horizontally and vertically (after having scaled it down with `transform="scale(0.5)`) while keeping the `` at 100% width and height of its container. As you can see in that fiddle, the `` is fine but the `` is all crammed up in the upper left corner. – Mark Boulder Jun 12 '15 at 16:16
  • I would ask it as a separate question. – Ian Jun 12 '15 at 16:19
  • http://stackoverflow.com/questions/30807952/resizing-svg-animation-while-keeping-it-centered-in-its-container incase you're wondering :-) – Mark Boulder Jun 12 '15 at 16:28