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

11-30 70 0 0

本期目标：继续用记事本，画一张“会笑的脸”，顺带把 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. 代码逐行拆解（人话版）

代码	人话
`<circle cx="50" cy="50" r="40">`	圆心 (50,50)，半径 40
`M30,60`	把笔移到左边嘴角
`Q50,75 70,60`	二次贝塞尔：控制点 (50,75) 把线拉成“微笑弧线”
`stroke-width="5"`	描边 5 像素，太细像面瘫
`stroke-linecap="round"`	两端磨圆，更萌

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

微笑 → 爆笑
把 Q50,75 改成 Q50,85，弧线再下垂，瞬间笑到下巴脱臼。
微笑 → 假笑
改成 Q50,65，嘴角微微上扬，官方营业专用。
加颜色
把 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. 常见坑指南

坑	说明
忘记 `Z`	图形不闭合，中间漏风，像被啃的披萨
大小写混用	`M=绝对坐标`，`m=相对坐标`，新手先全用大写，少翻车
逗号/空格乱打	SVG 解析器脾气古怪，多一个空格都可能翻车，复制我的模板最安全

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

“我画的 Logo”
把星星改成公司主色，发给设计师：
“业余时间帮你做了个矢量 Logo，放大不糊哦～”
“我画的表情包”
把笑脸 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，我连夜把渐变的彩虹塞进你的记事本！

快来点个赞吧

编程知识