更新说明:使用 Snap.svg - 我正在尝试加载一个 svg 图形，其中包含多个 svg 组，这些组将由大部分路径组成。我想选择 svg 中的特定组，然后应用顺序路径变换动画。
更新 #2:根据 @Ian 的建议，我附加了其他 svg 元素，它们出现在屏幕上，但我仍然无法让它们设置动画。 :)
因此，在这种情况下，我希望“前臂”旋转，一旦完成旋转，我希望为路径变换设置动画，就好像肌肉凸出一样(下图)
我已经尝试了 snap.io 和 SO 上的所有示例，但我无法让它工作。我绞尽脑汁思考了几个小时，但仍然没有弄清楚。任何帮助将不胜感激。免责声明:我有点 JS n00b，所以请友善:)
这是我的 html:
...
<body>
<svg id="the_man"></svg>
</body>
...
这是我的 svg - body.svg(来自 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>
最后，这是我的 JS。
更新
谢谢 @Robert Longson 帮助制作了我的 svgs，这些一定是一些 js 注释滑进去了:) 但我仍然无法获取路径变换动画
感谢@Ian 的建议，但我仍然无法让它工作 - 我错过了什么？
(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);
最佳答案
我认为值得尝试首先在 jsfiddle 上将其分解为更小的 block 。
但是，最初看起来您正在执行异步的 Snap.load()，然后在可能加载之前调用动画。您还没有真正说出您遇到的具体问题。
所以而不是..
Snap.load('body.svg', function(f) {
select stuff...
add stuff...
});
animateStuff();
你可能想做..
Snap.load('body.svg', function(f) {
select stuff...
add stuff...
animateStuff();
});
否则，当您调用 animate 函数时，加载实际上不会完成，因此如果您在控制台日志中收到一些未定义类型的消息，我不会感到惊讶。
关于javascript - Snap.svg 加载的 SVG 图形的主要问题 - 在特定元素上选择和动画路径变换不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25656493/