《SVG 不挨踢》第 6 集：手写签名——让名字自己“写”出来

本期目标：零手速、零手写板，用 SVG 把名字一笔一划“动画写出来”，发到群里瞬间被当成技术大佬 + 书法大师。

1. 先吹个牛：真·手写动画 = 路径 + 虚线 + 长度动画

核心思路一句话：
“把整条路径做成超长长长长的虚线，再让虚线偏移量从‘全长’跑到 0，看起来就像有人在动笔。”
SVG 自带俩属性：

• stroke-dasharray —— 定义虚线长度
• stroke-dashoffset —— 定义虚线起跑线

让 dashoffset 从“全长”到 0，线条就慢慢显现，手写感完成！

2. 五步实操——记事本直出手写签名

新建 signature.svg，无脑复制：

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <!-- 1. 黑底，逼格先行 -->
  <rect width="100%" height="100%" fill="#111"/>

  <!-- 2. 路径 = 连笔瞎写“Moon” -->
  <path id="sign" d="M30,80
                     C30,20 100,20 100,80
                     L130,80
                     C160,20 220,20 220,80
                     L250,80
                     L280,20 L280,80"
        stroke="#00ffab" stroke-width="5" fill="none"
        stroke-linecap="round" stroke-linejoin="round"/>

  <!-- 3. 虚线参数 + 动画 -->
  <script><![CDATA[
    const path = document.querySelector('#sign');
    const len = path.getTotalLength();
    path.style.strokeDasharray = len;
    path.style.strokeDashoffset = len;
    // 3 秒写完
    path.style.animation = 'write 3s ease forwards';
  ]]></script>

  <!-- 4. CSS 关键帧 -->
  <style>
    @keyframes write {
      to { stroke-dashoffset: 0; }
    }
  </style>
</svg>

保存 → 双击 → 一条 绿光笔迹 嗖地写出“Moon”，末端还带笔锋！

3. 代码拆成大白话

4. 纯 SVG 版（无 JS）——怕脚本警告的拿这个

把长度自己量出来（Illustrator 看属性 or 浏览器 console.log(len)），写死即可：

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#111"/>
  <path d="..." stroke="#00ffab" stroke-width="5" fill="none"
        stroke-dasharray="612" stroke-dashoffset="612">
    <animate attributeName="stroke-dashoffset"
             from="612" to="0" dur="3s" fill="freeze"/>
  </path>
</svg>

优点：零脚本，放公众号也能跑；缺点：长度得手动量。

5. 花式升级——笔锋 + 彩虹 + 发光

1. 笔锋：把 stroke-linecap="round" 保留，末端自动圆头，像毛笔收笔。
2. 彩虹手写：把渐变 url(#rainbow) 直接塞给 stroke，签名也能五彩斑斓！
3. 发光：再加 filter="url(#glow)"（第 3 集滤镜），霓虹笔迹闪瞎眼。

6. 立刻装×——3 种社交姿势

1. 合同电子签
   把名字动画插邮件，客户打开看见“手写”大名，仪式感拉满，秒回“同意”。
2. 婚礼请帖
   新人签名自动写，朋友圈配文“连签名都是代码写的”，科技浪漫值 +100。
3. 简历彩蛋
   底部签名动画，面试官看完内心 OS：“这伙计连名字都会跑，代码肯定跑得更快。”

7. 课后作业（任选）

A. 量自己名字长度，纯 SVG 无 JS 跑通手写动画，截图回帖。
B. 彩虹渐变 + 发光笔迹，五彩斑斓签名 晒图。
我抽 5 人送「第 7 集响应式图标源码」。

8. 下集预告

第 7 集《响应式图标：一次画图标，手机电脑都高清》
教你 viewBox + preserveAspectRatio + CSS 媒体查询，一套 SVG 适配所有屏，再也不做 1x/2x/3x 三套图。
想继续？评论区敲 1，我连夜把响应式塞进你的记事本！