《SVG 不挨踢》第 5 集：文字也能玩——打字机效果

本期目标：零 JS，让句子像黑客电影一样一个个字母往外蹦，老板看完直接给你配台机械键盘。

1. 先吐槽：静态文字太无聊，动起来才像黑客

上集咱们让图标心跳、星星旋转。
但文字呢？
如果整行直接啪地出现，就像快递扔门口——没仪式感。
我们要的是：一个字一个字蹦出来，附带光标闪啊闪。

2. 核心武器：<text> + <animate> 组合技

SVG 自带 字符长度动画神器：

<animate attributeName="textLength" … />

再配合 visibility 切片，就能实现打字机效果。

3. 五步实操——记事本直出打字机

新建 typewriter.svg，无脑复制：

<svg viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
  <!-- 1. 定义等宽字体 + 光标 -->
  <text x="10" y="50" font-size="30" font-family="monospace" fill="#00ff00">
    Hello, SVG 不挨踢！
    <!-- 2. 打字机动画 -->
    <animate attributeName="textLength"
      from="0" to="260"
      dur="4s"
      fill="freeze"
      calcMode="linear"/>
    <!-- 3. 光标闪啊闪 -->
    <animate attributeName="visibility"
      values="visible;hidden;visible"
      dur="0.5s"
      repeatCount="indefinite"/>
  </text>
</svg>

保存 → 双击 → 文字从左到右一个个“长”出来，绿色光标还闪！
像不像终端入侵？

4. 代码逐行翻译（人话版）

5. 进阶玩法——真·光标独立闪

上面是整行闪，逼格有限。
咱们把光标单独拆出来，只闪一个小方块：

<svg viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
  <text id="txt" x="10" y="50" font-size="30" font-family="monospace" fill="#00ff00">
    Hello, SVG 不挨踢！
    <animate id="type" attributeName="textLength"
      from="0" to="260" dur="4s" fill="freeze" calcMode="linear"/>
  </text>

  <!-- 光标矩形 -->
  <rect x="270" y="25" width="3" height="35" fill="#00ff00">
    <animate attributeName="opacity"
      values="1;0;1" dur="0.5s" repeatCount="indefinite"/>
  </rect>
</svg>

解释：

• 矩形当光标，定位在文字末端
• opacity 1→0→1，独立闪烁，终端味儿更浓

6. 调速 & 换色——秒变彩虹打字机

7. 立刻装×——3 种社交玩法

1. “程序员的浪漫”
   把句子改成 Will you marry me ?
   发过去，打字机闪完直接截图，成功率 +50%（失败别找我）。
2. “公司公告”
   年会大屏放 2025 全员涨薪 30% ！
   全场沸腾，HR 顺势上台——“只是 SVG 动画，别当真”。
3. “简历彩蛋”
   个人网站首页放打字机自我介绍，面试官看完直接跳过笔试。

8. 课后作业（任选）

A. 把光标改成 竖线（用 <line>），更逼真。
B. 换句子 + 彩虹渐变，彩虹打字机截图回帖。
我抽 5 人送「第 6 集手写签名生成源码」。

9. 下集预告

第 6 集《SVG 签名：手写感生成》
不用手写板，让名字一笔一划自己“写”出来，合同/贺卡/电子请帖都能用。
想继续？评论区敲 1，我连夜把笔顺塞进你的记事本！