如何实现SVG文字手写绘制动画及自定义SVG适配方法

不生效的核心原因 #

这类手写动画本质是描边逐段显示动画，你的SVG存在两个核心问题：

• path仅设置了fill填充属性，没有配置描边相关参数，动画无生效载体
• 没有绑定对应路径的长度参数，也没有设置初始的描边偏移规则

具体修改步骤 #

1. 调整path的基础属性
   移除原有fill属性值，改为透明，新增描边颜色、描边宽度配置，示例如下：

<svg xmlns="http://www.w3.org/2000/svg" width="417.773" height="224.047" viewBox="0 0 417.773 224.047">
  <path id="Path_35" data-name="Path 35" d="M-3.875-234.323c-1.516,0-8.928,23.415-22.236,70.078-2.021.842-29.143,6.907-81.533,18.193-.505,0-.842-.674-1.348-2.021.842-1.179,6.57-22.742,16.846-64.687,0-.842-.505-1.179-1.348-1.348h-1.348c-1.179,0-7.581,22.91-18.867,68.73q-8.844,3.285-95.01,23.584c-35.881,7.917-53.906,12.3-53.906,13.477v2.021a4.017,4.017,0,0,1,2.021.674q56.1-14.15,143.525-33.691c0,.505.168.674.674.674h.674q0,1.516-23.584,92.988a4.017,4.017,0,0,1,.674,2.021h2.7l25.605-96.357c10.276-3.538,37.566-9.6,81.533-18.193h.674q-17.435,69.236-33.691,141.5c.674,1.853,1.348,2.7,2.021,2.7h.674l1.348-.674c11.624-53.738,23.415-101.916,35.039-144.873,38.408-8.591,66.035-12.8,82.881-12.8h5.391l3.369,3.369h.674c.674,0,1.348-.842,2.021-2.7,0-3.2-3.2-4.717-9.434-4.717h-.674c-15.5,0-42.451,3.875-80.859,11.455,0-.505-.505-.674-1.348-.674,2.7-11.624,9.265-33.86,19.541-66.709,0-1.348-.505-2.021-1.348-2.021Zm14.993,93.662c-8.254,0-13.982,6.738-17.519,20.215,0,6.57,4.548,10.276,13.477,11.455,9.434,0,19.036-7.917,28.975-23.584,0-1.348-.505-2.021-1.348-2.021H33.354c-8.76,13.477-16.677,20.215-23.584,20.215H2.358a7.891,7.891,0,0,1-4.043-4.043v-2.021a26.887,26.887,0,0,1,1.348-6.064c11.624-3.706,17.519-6.57,17.519-8.76v-2.021a5.721,5.721,0,0,0-5.391-3.369Zm-8.591,9.939c1.516-3.2,3.369-4.885,5.559-5.222l3.369-.168-4.717,2.864ZM98.716-238.029c-1.516,0-3.875,6.738-7.412,20.215q-4.3,20.973-34.365,78.838c-8.254,14.319-13.645,21.562-16.172,21.562H38.745c-1.853-.505-2.7-2.527-2.7-6.064v-10.107c14.487-43.63,24.089-76.311,28.975-97.7-.337-3.2-1.011-4.717-2.021-4.717H60.981l-4.043,4.043c-17.014,44.978-25.605,79.006-25.605,101.748v4.043c0,7.581,2.527,12.129,7.412,13.477,7.581,0,20.215-18.025,37.734-53.906h.674c-3.538,17.183-5.391,29.817-5.391,37.734v4.043c0,6.233,1.516,10.276,4.717,12.129h2.7c4.548,0,11.624-7.244,21.562-21.562-.505,0-.674-.505-.674-1.348H98.042C88.1-123.479,81.533-117.414,78.5-117.414c-1.348-.337-2.021-2.19-2.021-5.391v-4.717c0-12.971,3.2-31.838,9.434-56.6,10.276-31,15.5-48.347,15.5-51.885,0-1.348-.505-2.021-1.348-2.021Zm-41.1,17.519v.674c-2.19,11.118-6.738,26.448-13.477,45.82h-.674v-.674c0-5.054,4.548-20.383,13.477-45.82ZM106.3-139.482c-6.57,0-11.118,6.738-13.477,20.215,0,6.233,2.864,9.939,8.76,11.455,4.548,0,8.928-4.043,13.477-12.129,14.319-5.391,22.4-9.939,24.258-13.477v-.674c0-.842-.505-1.179-1.348-1.348h-1.348c-8.591,5.9-14.656,8.76-18.193,8.76h-.674C116.909-135.271,113.035-139.482,106.3-139.482Zm-1.348,5.391c3.875-1.516,6.57.168,8.086,5.391v2.021q-6.822,0-8.086-6.064Zm-4.717,5.391c4.885,3.706,8.423,5.9,10.781,6.738-2.021,5.9-4.885,8.76-8.76,8.76h-2.021c-1.348-.674-2.19-2.358-2.7-5.222C97.2-121.12,98.042-124.49,100.232-128.7Zm51.211,7.244c-4.043,0-7.075,2.19-8.928,6.738l3.032,2.864c5.728-1.685,8.928-3.538,9.6-5.728-.168-2.527-.842-3.875-1.685-3.875Z" transform="translate(262.624 238.029)" fill="transparent" stroke="#949ba5" stroke-width="2"/>
</svg>

2. 计算path总长度
   在浏览器控制台执行以下代码，即可得到当前路径的总长度：

const targetPath = document.querySelector('#Path_35')
console.log(targetPath.getTotalLength())

3. 新增动画CSS样式
   假设你计算得到的总长度为2400（请替换为实际计算值），添加如下CSS：

#Path_35 {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  /* 动画时长可自定义调整 */
  animation: pathDraw 4s linear forwards;
}
@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}

如果需要动画结束后恢复原本的填充效果，可以额外加一段延迟填充的动画：

#Path_35 {
  /* 原有样式不变，修改animation属性即可 */
  animation: pathDraw 4s linear forwards, pathFill 0.6s linear 4s forwards;
}
@keyframes pathFill {
  to {
    fill: #949ba5;
  }
}

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