svg渐进线绘制拼图，jQuery动画步骤中的问题

Question

我需要逐步绘制基本的几何图形。也就是说，当我画一条线时，你需要看到它在动画中的延伸。这里有几个关于如何做的问题，我采用了这个方法。

当已经绘制了一些线时，我的问题就开始了，在用户单击一个按钮之后，还应该再画几条线。新线的绘制是以非常不平衡的方式进行的。

我制作了一个小提琴来举例说明。它从正确绘制两条线开始。然后，如果用户单击“下一步绘制”，则会再绘制两条线，但绘图并不平滑。

我一直在尝试调试，jquery的动画的step函数有一些问题。

var stepCount = 0;
$('path[fill*="none"]').animate({
    'to': 1
}, {
    duration: duration,
        step: function(pos, fx) {
    //console.log("fx = ", fx);
    stepCount += 1;
        var offset = length * fx.pos;
        var subpath = line.getSubpath(0, offset);
        canvas.path(subpath).attr({

           'stroke-width': 2,
           stroke: "black"
        });
        },
    complete: function() {
    console.log("stepCount = ", stepCount);
    }
});

我已经计算了步骤，并记录了完整函数中的每一行的步骤：

stepCount =  139
stepCount =  140
stepCount =  278
stepCount =  1261
stepCount =  1262
 ....
stepCount =  2318

前两行stepCounts表示前两行。139,140，这是合理的然后第三行得到278的计数--是步骤数量的两倍。但是对于第四个问题，它打印了一长串从1261年到2318年的stepCounts。

我需要一些帮助:-)

更正：第三个stepCount日志发生在绘制前两行之后，在用户单击“绘制下一步”之前。

解决了： ok，仍然使用逐步绘制更长的子路径的方法，我使用melc的解决方案修改了小提琴。我也解决了这个邪恶的道路混乱的DOM，大卫弗雷格利指出。在step函数的每一次迭代中，我都删除了前面的子路径。最后，在完整的函数中，我显示了原始路径。这不仅是一个干净的DOM，而且解决了一些反混叠问题.

Answer 1

选择器$('path[fill*="none"]').animate({选择所有路径元素。要使它正常工作，您需要用$(line.node).animate({替换它。

Answer 2

在renderPath函数中，您将查询DOM以查找页面中的所有<path>元素，并对每个元素进行动画化。