《SVG 不挨踢》第 3 集：颜色不止红绿蓝，还有“姨妈红”“基佬紫”

本期目标：给上集的笑脸打彩虹渐变 + 发光滤镜，5 行代码让甲方说“加钱”！

1. 开场先吐槽：纯色太土，像 90 年 KTV

上集那张 gold 笑脸，被设计师闺蜜吐槽：
“金得发土，像爸妈结婚录像带。”
行，今天把它洗剪吹，一步到位 赛博霓虹。

2. 彩虹渐变——3 步搞定

① 定义渐变

<defs>
  <linearGradient id="rainbow" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%"  stop-color="#ff00ff"/>
    <stop offset="50%" stop-color="#00ffff"/>
    <stop offset="100%"stop-color="#ffff00"/>
  </linearGradient>
</defs>

人话翻译：

• x1="0" y1="0" x2="1" y2="1" 表示从左上角拉到右下角。
• stop 就是调色盘，想加几个色随便你。

② 把圆 fill 换成 url(#rainbow)

<circle cx="50" cy="50" r="40" fill="url(#rainbow)"/>

③ 保存为 cyber.svg → 双击

恭喜，你的脸现在会发光，蹦迪灯球即视感。

3. 发光滤镜——5 行代码升仙

渐变只是底色，发光 才是灵魂。
复制这段滤镜，粘进 <defs> 里：

<filter id="glow">
  <feGaussianBlur stdDeviation="3" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

然后给任意元素加 filter="url(#glow)"：

<circle cx="50" cy="50" r="40" fill="url(#rainbow)" filter="url(#glow)"/>

效果：边缘 3 像素柔光，甲方看完直接打钱。

4. 把彩虹塞给嘴巴——渐变不止填充，还能描边

想让嘴角也彩虹？
把 <path> 的 stroke 改成渐变就行：

<path d="M30,60 Q50,75 70,60"
      stroke="url(#rainbow)" fill="none"
      stroke-width="5" stroke-linecap="round"/>

Tips：

• 渐变可以 fill 也能 stroke，别客气。
• 描边宽度 stroke-width="5" 以上，彩虹才明显。

5. 颜色关键字宝库——比口红色号还多

SVG 官方 147 个颜色名，随便举几个：
deeppink lemonchiffon indigo darkslateblue tomato
用法：

<circle fill="tomato"/>

下次需求文档写“番茄红”，设计师都蒙圈，你一句 tomato 搞定，专业度 +50。

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

1. “公司 Logo 霓虹版”
   把主色换成彩虹渐变，发给老板：
   “免费做了个夜间模式适配，发光不费电。”
2. “彩虹签名”
   把自己的名字转曲（下集会教），描边彩虹，朋友圈封面安排。
3. “彩虹二维码”
   先别急，第 10 集才教，先留个彩蛋。

7. 课后作业（任选）

A. 把笑脸眼睛也彩虹：
<circle fill="url(#rainbow)" filter="url(#glow)"/>
B. 自己再定义一个“姨妈红 → 基佬紫”渐变，id 取名 awesome，用在任何图形。
截图回帖，我抽 5 人送「第 4 集心跳动画源码」。

8. 下集预告

第 4 集《让图标动起来：动画比 PPT 简单》
不用 JS，一行 <animate> 让爱心心跳、星星旋转、老板震惊。
想继续？评论区敲 1，我连夜把动画塞进你的记事本！