Question

更新说明：使用Snap.svg - 我正在尝试加载包含多个svg组的svg图形，这些组将构成大多数路径。我想在svg中选择特定的组，然后应用顺序路径转换动画。

UPDATE＃2：Per @ Ian的建议我附加了其他svg元素，它们出现在屏幕上，但我仍然无法让它们动画。：）

所以在这种情况下，我希望'前臂'旋转，一旦完成旋转，我想为路径变换设置动画，好像肌肉在鼓胀（图片如下）

enter image description here

我已尝试过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);

Answer 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函数时，加载实际上并没有完成，所以如果你在控制台日志中得到一些未定义类型的消息，我就不会感到惊讶。

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

1 个答案: