如何用JavaScript实现多SVG路径逐段手绘式动画？

你的核心问题集中在三点：直接移动原路径导致后续复用异常、闭合路径的动画参数设置错误，以及部分闭合路径可能缺失描边属性导致动画不可见。以下是针对性的解决方案：

关键修正点 #

• 克隆路径而非移动原路径：原代码直接将svgin中的路径迁移到目标容器，会清空原SVG的路径资源，导致重新初始化时无法找到路径。改为克隆路径进行动画操作，保留原资源完整性。
• 修正动画终点参数：stroke-dashoffset的动画终点需设为0，而非原代码中的2，才能让路径完全显示完成。
• 强制设置描边属性：如果闭合路径原本只有填充（fill）没有描边（stroke），需手动添加描边颜色和宽度，否则描边动画无法展示。

修正后的完整代码 #

var s = Snap("#svgout");
var svgin = Snap("#svgin");

function Drawing(svgin, transformString, timeBetweenDraws) {
    this.fragment = svgin;
    this.pathArray = this.fragment.selectAll('path');
    this.group = s.g().transform(transformString).drag();
    this.timeBetweenDraws = timeBetweenDraws;
};

Drawing.prototype.init = function() {
    this.group.clear();
    this.currentPathIndex = 0;
};

Drawing.prototype.endReached = function() {
    return this.currentPathIndex >= this.pathArray.length;
};

Drawing.prototype.callOnFinished = function() {}

Drawing.prototype.initDraw = function() {
    this.init();
    this.draw();
};

Drawing.prototype.quickDraw = function() {
    this.init();
    this.timeBetweenDraws = 0;
    this.draw();
};

Drawing.prototype.draw = function() {
    if (this.endReached()) {
        this.callOnFinished();
        return;
    };

    // 克隆原路径，避免修改或移动原SVG内容
    var originalPath = this.pathArray[this.currentPathIndex];
    var myPath = originalPath.clone();
    
    this.group.append(myPath);

    // 获取路径总长度
    var pathLength = myPath.getTotalLength();

    // 确保路径具备描边属性（兼容无描边的闭合路径）
    var stroke = myPath.attr('stroke') || '#000';
    var strokeWidth = myPath.attr('stroke-width') || 2;
    myPath.attr({
        "stroke": stroke,
        "stroke-width": strokeWidth,
        // 闭合路径的dasharray设置为路径长度+空格+路径长度
        "stroke-dasharray": pathLength + " " + pathLength,
        "stroke-dashoffset": pathLength
    });

    this.currentPathIndex++;

    // 动画终点设为0，保证路径完全绘制完成
    myPath.animate(
        {"stroke-dashoffset": 0}, 
        this.timeBetweenDraws, 
        mina.easeout, 
        this.draw.bind(this)
    );
};

var myDrawing1 = new Drawing(svgin, 'translate(0,400) scale(0.100000,-0.100000)', 800);
myDrawing1.initDraw();

额外优化：调整手绘起始方向 #

如果闭合路径的动画方向不符合预期（比如不是从左到右），可以通过修改路径的d属性调整起始点：使用SnapSVG的path.getPointAtLength()方法拆分路径，或手动编辑路径指令，将起始点挪到你需要的手绘起点位置。

内容的提问来源于stack exchange，提问作者BlasterGod