如何使用Snap.svg为​​加载的SVG内部的路径变形设置动画？

Question

我知道你可以使用snap.svg（How to animate path morphs using snap.svg）

为path morhs制作动画

是否可以'加载'路径然后设置路径变形动画？或者你必须定义Snap.svg里面的路径吗？

(function($) {

    'use strict';

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

    // 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();
    });


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

// animate morph 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 morph 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);
};



})(jQuery);

jsfiddle here - http://jsfiddle.net/1wqewzs3/2/

由于

Answer 1

您可以在加载或其他任何内容后设置动画，主要是变量定义在可访问的位置，动画仅在加载后运行。

在这种特殊情况下，主要错误是您在Snap.load函数中定义了arm，forearm，bicep变量，然后尝试在动画函数中使用它们（不知道这些变量）

几种选择......

1. 使手臂，前臂，二头肌变成全局变量（在脚本开头使用'var'，如果所有相关位都在立即模式函数中，它应该限制范围可能更好）。这可能是最简单的。

2. 使用选择...

   编写动画

   s.select('#forearm').animate({
               'transform': 'r45,320,120'
           }, 1000, mina.linear, anim2);