Snap.svg 加载 SVG 图形的主要问题 - 在特定元素上选择和动画路径变换不起作用答案

【问题标题】：Major problems with Snap.svg loaded SVG graphics - selecting and animating path transforms on specific elements is not workingSnap.svg 加载 SVG 图形的主要问题 - 在特定元素上选择和动画路径变换不起作用
【发布时间】：2014-09-05 07:44:29
【问题描述】：

更新描述：使用 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 帮助我制作了 svg，那些一定是一些 js cmets 滑入其中 :) 但我仍然无法获得路径变换动画

感谢@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);

【问题讨论】：

// 不是有效的路径字符

标签： javascript jquery svg snap.svg

【解决方案1】：

我认为首先在 jsfiddle 上尝试将其分解成更小的块是值得的。

但是，最初看起来您正在执行异步的 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 函数时，加载实际上不会完成，因此如果您在控制台日志中收到一些未定义类型的消息，我不会感到惊讶。

【讨论】：

谢谢@Ian，现在就试试。我会在几分钟后发布更新。
你需要提琴，因为我认为有一些错误。例如，看起来你附加了“手臂”，但从不附加“二头肌”，所以它不能为它设置动画。
k，我现在把小提琴放在一起
我已经在stackoverflow.com/questions/25678159/… 回答了这个问题，我可能会将其中一个标记为重复。