Skip to content

Unable to use el.setCurrentTime() to render svg animation #12004

Open
kmalakoff opened this Issue Feb 24, 2014 · 2 comments

1 participant

@kmalakoff

Thank you for such a great solution. I've been using it for headless testing and recently am trying something different...rendering svg animations.

There is no problem rendering at time 0, but for some reason, I cannot get specific frames rendered. In Chrome, I used the following to step through specific animation frames:

var el;
if (el = $('svg')[0]) {
  el.pauseAnimations();
  var time_per_frame_ms = (1 / 60) * 1000;
  var end_ms = 4000;
  var render = function(time_ms) {
    el.setCurrentTime(time_ms / 1000);
    time_ms += time_per_frame_ms;
    if (time_ms > end_ms) {return;}
    return render(time_ms);  // for example, I could use setTimeout to choose a different frame rate
  };
  render(0);

When I tried something similar in phantomjs inside of an evaluate block, it was as if the pausing and setCurrentTime did not act in a similar manner. Perhaps this is to be expected due to limits in control over SVGs?

    page.open(source, function(status) {
      page.evaluate((function(time) {
        var el = document.getElementsByTagName('svg')[0];
        el.pauseAnimations();
        el.setCurrentTime(time / 1000);
      }), time);

      setTimeout((function() {
        page.render(dest);
        phantom.exit();
      }), 100);
    });

If I paused, the animation was stuck at time 0 (despite delaying setTimeout at any value).

If I didn't pause, the animation just played at its own time. In fact, when I called el.setCurrentTime() and then el.getCurrentTime(), the returned time was always just the current running time as if el.setCurrentTime() was ignored.

Any ideas if this is a known limitation of rendering svg through phantomjs? We've been looking at Batik as an alternative, but it is really slow.

Cheers!

@kmalakoff

I should probably have said that if you know of a way to select and render frames from an SVG animation at various framerates through phantomjs, I'd be happy to change my approach!

@kmalakoff

We're going down the Batik path because we couldn't control phantomjs enough to render SVGs frame by frame. If this is a use case that you are planning on supporting OR if frame by frame SVG rendering through phantomjs is not a reasonable expectation, please let me know...thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.