如何使用Snap.svg为加载的SVG内部的路径变形设置动画？
我知道你可以用snap.svg动画路径morhs（ 如何使用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/
谢谢
您可以在加载或其他任何内容后设置动画，主要是变量定义在可访问的位置，并且动画仅在加载后运行。
在这种特殊情况下，主要错误是您在Snap.load函数中定义了arm，forearm，bicep变量，然后尝试在动画函数中使用它们（它们不知道这些变量）。
几个选项……
-
make arm，forearm，bicep所有全局变量（在脚本开头使用’var’，如果所有相关位都在立即模式函数中，它应该限制范围可能更好）。 这可能是最简单的。
-
用选择写出你的动画……
s.select('#forearm').animate({ 'transform': 'r45,320,120' }, 1000, mina.linear, anim2);