Major problems with Snap.svg loaded SVG graphics - selecting and animating path transforms on specific elements is not working

Question

UPDATED DESCRIPTION: Using Snap.svg - I'm trying to load an svg graphic, that contains several svg groups, the groups will be made up most of paths. I would like to select specific groups within the svg and then apply sequential path transform animations.

UPDATE #2: Per @Ian's suggestion I appended the other svg elements and they're appearing on screen but I still can't get them to animate. :)

So in this case I would like the 'forearm' to rotate, once its done rotating I want to animate the paths transforms as if the muscles were bulging (image below)

enter image description here

I've tried all the examples on snap.io and on SO but I can't get it to work. I'm racking my mind for a few hours and I still have yet to figure it out. Any help would be GREATLY appreciated. Disclaimer: I'm a bit of a JS n00b, so please be kind :)

Heres my html:

...
<body>
    <svg id="the_man"></svg>
</body>
...

Here's my svg - body.svg (from AI)

<?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="body" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <g id="arm">
        <path id="bicep" d="M337.889,188c0,0-36.11-35.556-98.333-32.222c-62.222,3.333-84.444,43.889-84.444,43.889l1.667,49.445
    c28.749,11.781,95.286,69.204,178.333,3.333L337.889,188z"/>
        <path id="forearm" d="M174.333,250.938c0,0,19.659-36.111,17.816-98.333c-1.844-62.223-24.267-84.445-24.267-84.445l-27.338,1.667
    c-6.514,28.749-38.263,95.286-1.843,178.334L174.333,250.938z"/>
    </g>
</svg>

Finally, heres my JS.

UPDATE

Thank you @Robert Longson that helped to make my svgs, those must have been some js comments that slipped in there :) But I'm still having trouble get the path transform animations

Thanks to @Ian for the suggestion but I still cant get it to work-what am I missing?

(function($) {

    'use strict';

    // grab the empty svg element in the html
    var s = Snap(800,600);

    // animate rotate the forearm graphic
    var anim1 = function() {
        forearm.animate({
            'transform': 'r45,320,120'
        }, 1000, mina.linear, anim2);
    };

    // animate from the svg images current path coordinates top the ones below
    var anim2 = function() {
        bicep.animate({
            d: 'M337.889,188c-12.064-11.708-28.073-93.482-89.777-92.889c-62.222,3.333-93,104.555-93,104.555l1.667,49.445 c29.608,30.553,96.669,99.406,178.333,3.333L337.889,188z'
        }, 1000, mina.bounce, anim3);
    };

    // animate from the svg images current path coordinates top the ones below
    var anim3 = function() {
        forearm.animate({
            d: 'M174.333,250.938c0,0,19.659-36.111,17.816-98.333c-25.316-59.032-31.731-75.007-24.267-84.445l-27.338,1.667 c-35.496,57.849-82.325,139.528-1.843,178.334L174.333,250.938z'
        }, 1000, mina.bounce);
    };

    // load the svg and grab the #arm and its inner elemmnts
    Snap.load('body.svg', function(f) {
        var arm = f.select('#arm'),
            forearm = f.select('#forearm'),
            bicep = f.select('#bicep');
        s.append(arm);
        s.append(forearm);
        s.append(bicep);
        anim1();
    });

})(jQuery);

// are not valid path characters – Robert Longson Sep 04 '14 at 06:19 — Robert Longson, Sep 04 '14 at 06:19

score 1 · Accepted Answer · answered Sep 04 '14 at 20:14

1

I think its worth trying to break it down into a smaller chunk on a jsfiddle first.

However, it initially looks like you are doing a Snap.load() which is asynchronous, and then calling an animation before its probably loaded. You haven't really said what specific problems you are having.

So rather than..

Snap.load('body.svg', function(f) {
    select stuff...
    add stuff...
});

animateStuff();

You probably want to do..

 Snap.load('body.svg', function(f) {
    select stuff...
    add stuff...
    animateStuff();
});

Otherwise when you call the animate function, the load won't have actually finished, so it wouldn't surprise me if you get some undefined type messages in your console log.

answered Sep 04 '14 at 20:14

Ian

13,724
4
52
75

Thanks @Ian, trying that now. I'll post an update in a few min. – Les Ballard Sep 04 '14 at 21:09
You need to put a fiddle up, as I think there's a few errors. For example also it looks like you append 'arm', but never append 'bicep', so it can't animate that. – Ian Sep 04 '14 at 22:26
k, I'll put a fiddle together now – Les Ballard Sep 04 '14 at 23:34
I've answered the one at http://stackoverflow.com/questions/25678159/how-do-you-animate-path-morphs-inside-of-loaded-svg-with-snap-svg I would probably mark one of them as a duplicate. – Ian Sep 05 '14 at 08:44

Major problems with Snap.svg loaded SVG graphics - selecting and animating path transforms on specific elements is not working

1 Answers1