如何使用Mask实现手绘风格SVG动画？

你想要实现的手绘风格SVG动画效果如下：

你的现有代码存在几个问题导致效果不符，以下是修正后的完整解决方案：

问题分析 #

1. 所有路径使用固定的stroke-dasharray: 1000，但每个路径实际长度不同，导致描边动画进度不一致
2. 缺少手绘特有的笔触抖动、速度变化效果，单纯匀速描边过于生硬
3. SVG中的路径未设置对应ID，CSS中的延迟规则无法生效

修正后的代码 #

HTML（添加路径ID） #

<div>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677 689" xml:space="preserve">
    <path id="path1" d="M70.1,676L70.1,676c40,1.5,73.6-29.7,75.1-69.7l12.7-345.2c1.5-40-29.7-73.6-69.7-75.1h0c-40-1.5-73.6,29.7-75.1,69.7L0.4,600.9C-1.1,640.9,30.2,674.5,70.1,676z"/>
    <path id="path2" d="M274.2,682.2L274.2,682.2c38.9,9.2,78-14.9,87.1-53.9l97.8-415c9.2-38.9-14.9-78-53.9-87.1l0,0c-38.9-9.2-78,14.9-87.1,53.9l-97.8,415C211.1,634.1,235.2,673.1,274.2,682.2z"/>
    <path id="path3" d="M246,669.4l3.3,2.7c34.9,26,81.3,19.8,106.4-11.4L790.6,118c25-31.2,20-76.8-11.2-101.8l0,0c-31.2-25-76.8-20-101.9,11.2L242.6,570.1C217.6,601.3,214.8,644.4,246,669.4z"/>
    <path id="path4" d="M34.3,665.2l0.5,0.4c32.2,23.8,77.7,17.9,101.5-14.3L442.1,237c23.8-32.2,17-77.5-15.1-101.3l-0.5-0.4c-32.2-23.8-79.4-15.9-103.2,16.3L19.1,563.9C-4.7,596.1,2.1,641.4,34.3,665.2z"/>
  </svg>
</div>

CSS（优化动画效果） #

path {
    stroke: black;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round; /* 模拟画笔笔尖圆润效果 */
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
    /* 自定义曲线模拟手绘速度变化，避免匀速生硬 */
    animation: draw 4s cubic-bezier(0.37, 0.01, 0.63, 0.99) forwards;
}

#path1 { animation-delay: 0s; }
#path2 { animation-delay: 4s; }
#path3 { animation-delay: 8s; }
#path4 { animation-delay: 12s; }

@keyframes draw {
    to {
        stroke-dashoffset: 0;
        /* 添加微小的宽度变化，模拟手绘笔触抖动 */
        stroke-width: 2.2;
    }
    50% {
        stroke-width: 1.8;
    }
}

JavaScript（获取真实路径长度） #

// 遍历所有路径，计算实际长度并赋值给CSS变量
document.querySelectorAll('path').forEach(path => {
  const length = path.getTotalLength();
  path.style.setProperty('--path-length', length);
});

额外优化建议 #

• 如果想要更真实的手绘抖动，可以添加SVG滤镜模拟画笔纹理
• 调整cubic-bezier参数可以进一步模拟手绘时的停顿、加速效果
• 增加stroke-opacity的动画变化，模拟画笔起笔收笔的透明度变化

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