《SVG 不挨踢》第 2 集：路径狂魔——d 属性到底在嘀咕啥？

本期目标：继续用记事本，画一张“会笑的脸”，顺带把 d 属性这货扒得底裤不剩。

1. 先吐槽：上集那串“C50,20…”看懵你了？

别害羞，我第一次也懵。
但 SVG 的 d 属性其实只有 5 个常用字母，背下来就能横着走：

M L H V Z
口诀：Move 提笔走，Line 画直线，H 横，V 垂，Z 回家闭。

记住这 5 兄弟，今天咱们就能画个 标准的笑脸表情包。

2. 三步画脸（复制即可跑）

打开记事本，新建 smile.svg，无脑粘：

<svg viewBox="0 0 100 100">
  <!-- 1. 脸：金黄色大圆 -->
  <circle cx="50" cy="50" r="40" fill="gold"/>

  <!-- 2. 左眼 -->
  <circle cx="35" cy="40" r="5"/>

  <!-- 3. 右眼 -->
  <circle cx="65" cy="40" r="5"/>

  <!-- 4. 笑嘴：用路径 -->
  <path d="M30,60
           Q50,75 70,60"
        stroke="#000" fill="none" stroke-width="5" stroke-linecap="round"/>
</svg>

保存 → 双击 → 一张 100% 原创笑脸出现！
没用到 PS、没用到 AI，就几行字。

3. 代码逐行拆解（人话版）

4. 动手改一改——表情包量产机

1. 微笑 → 爆笑
   把 Q50,75 改成 Q50,85，弧线再下垂，瞬间笑到下巴脱臼。
2. 微笑 → 假笑
   改成 Q50,65，嘴角微微上扬，官方营业专用。
3. 加颜色
   把 gold 换成 linearGradient 渐变（上集教过），立刻“赛博朋克脸”。

5. 进阶作业：画星星

给张草稿，只提示关键点：

M50,10 L61,35 L90,35 L68,53 L79,78 L50,60 L21,78 L32,53 L10,35 L39,35 Z

保存为 star.svg，看是不是五角星。
能跑出来，说明 d 属性已任你摆布！

6. 常见坑指南

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

1. “我画的 Logo”
   把星星改成公司主色，发给设计师：
   “业余时间帮你做了个矢量 Logo，放大不糊哦～”
2. “我画的表情包”
   把笑脸 fill 改成 linearGradient 彩虹，群友必问“咋做的？”
   你回：“记事本 + 5 行代码。”
   逼格瞬间拉满。

8. 课后作业（任选）

A. 画一个“哭脸”：把嘴角弧线从 Q50,75 改成 Q50,45，让弧线反弯。
B. 画一个“鄙视眼”：把左眼 cx="35" 改成 cx="32"，右眼 cx="65" 改成 cx="68"，瞬间斗鸡眼。
截图回帖，我随机抽 5 人送「第 3 集彩虹渐变源码」。

9. 下集预告

第 3 集《颜色不止红绿蓝，还有“姨妈红”“基佬紫”》
带你玩渐变、发光、滤镜，让图标从 5 毛特效升级到 5 块，甲方看完只说两个字：
“加钱！”
想继续？评论区敲 1，我连夜把渐变的彩虹塞进你的记事本！