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

Question

我知道你可以动画路径morhs与snap.svg（How to animate path morphs using snap.svg）

是否有可能“负荷”的路径，然后动画路径变身？或者您是否需要在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 - http://jsfiddle.net/1wqewzs3/2/

感谢

Answer 1

您可以动画的负载或任何真正以下，更主要的是这两个变量定义的地方访问，并且动画效果后，才运行加载。

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

几个选项...

1. 化妆上臂，前臂，二头肌所有的全局变量（使用“无功”在脚本的开始，如果所有相关位在即时模式功能，它应该限制可能更好的范围）。这可能是最简单的。

2. 写有选择你的动画......

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