《SVG 不挨踢》第 10 集：终极装逼——用 SVG 画二维码，扫得出、换得色、动得酷

本期目标：纯手写 + 纯路径，生成一个能被微信扫开的 SVG 二维码，还能彩虹渐变 + 旋转跳，逼值直接封顶。

1. 先吹个牛：二维码 ≠ 位图

传统观念：二维码 = 黑白方块 PNG。
今天教你：二维码 = 一群正方形坐标，而 SVG 最拿手的就是“画方块”。
所以——
一个 <rect> 阵列 = 二维码，文件体积 < 5 KB，放大 800 倍依然刀锋般锐利。

2. 核心思路：三步造码

① 拿到目标 URL → 在线生成 二维码坐标点（0/1 矩阵）
② 把“1”的格子转成 <rect>，“0”直接忽略
③ 加 viewBox、渐变、动画，扫码成功 = 装逼成功

3. 在线生成坐标——5 秒搞定

打开 https://www.cliquid.cn/qrcode（随便搜“二维码 矩阵”）

• 内容填 https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=你的BizID（或任何网址）

• 选择 “矩阵” 或 “0/1 文本” → 复制结果
  示例（7×7 简码，实际 25×25）：

• 1 1 1 1 1 1
• 0 0 0 0 0 1
• 0 1 1 1 0 1
• 0 0 0 0 0 1
• 0 1 1 1 0 1
• 0 0 0 0 0 1

• 1 1 1 1 1 1

4. 五步实操——记事本直出二维码

新建 qrcode.svg，无脑粘（示例 25×25，坐标已压缩）：

<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
  <!-- 1. 彩虹渐变 -->
  <defs>
    <linearGradient id="rainbow" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ff00ff"/>
      <stop offset="100%" stop-color="#00ffff"/>
    </linearGradient>
  </defs>

  <!-- 2. 二维码矩形群 -->
  <g fill="url(#rainbow)">
    <!-- 第 0 行 -->
    <rect x="0"  y="0"  width="1" height="1"/>
    <rect x="1"  y="0"  width="1" height="1"/>
    <rect x="2"  y="0"  width="1" height="1"/>
    <!-- …… 这里省略 300 行，实际用在线工具一键生成 -->
    <!-- 最后一行 -->
    <rect x="22" y="24" width="1" height="1"/>
    <rect x="23" y="24" width="1" height="1"/>
    <rect x="24" y="24" width="1" height="1"/>
  </g>

  <!-- 3. 整体旋转动画 -->
  <animateTransform attributeName="transform"
                    type="rotate"
                    from="0 12.5 12.5" to="360 12.5 12.5"
                    dur="5s" repeatCount="indefinite"/>
</svg>

保存 → 扫码 → 跳转成功 → 装逼完成！

5. 懒人工具——一键生成 <rect> 阵列

不想手写？用 https://qrcode-svg.vercel.app

• 输入网址 → 选 SVG 矩阵 → 直接下载
• 自带 viewBox + <rect> 群，体积 3-4 KB，还能选 圆角、渐变、透明

6. 体积对比——伤害性极大

7. 可玩花活——只有想不到

1. 彩虹 + 旋转（已演示）
2. 心跳二维码
   给整群 <rect> 加 scale 动画，边跳边扫，扫码成功率 ±0%，但帅±100%
3. 写字 + 二维码
   第 5 集打字机效果 + 本集二维码，先写字再出码，像特工任务

8. 扫坑指南——别让码废掉

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

1. “会动的二维码”
   发群里：“刚写的 SVG 二维码，能扫能转，放大不发虚。”
2. “彩虹简历”
   右下角放彩虹二维码，扫完进个人作品站，面试官直接跳过笔试。
3. “前端婚礼请帖”
   新郎新娘签名（第 6 集）→ 打字机情话（第 5 集）→ 旋转二维码入场，婚礼大屏全场尖叫。

10. 课后作业（任选）

A. 用工具生成 自己博客/公众号二维码，加彩虹渐变，截图晒码。
B. 给二维码加 心跳 or 旋转动画，录屏发贴，验证能扫。
我抽 5 人送「全套 10 集源码仓库」+「电子彩虹证书」。

11. 全剧终 —— 10 集回顾

1. 爱心 6 行代码
2. 路径画笑脸
3. 彩虹渐变 + 发光
4. 缩放旋转动画
5. 打字机文字
6. 手写签名
7. 响应式图标
8. SVG 精灵图
9. 导出瘦身
10. 会动的二维码

从记事本到彩虹二维码，一滴 PS 没用，全用打字完成。
感谢陪伴，想二刷、想补作业、想炫耀，评论区随时开门——
SVG 不挨踢，咱们江湖再见！