大家可能在网上见到过这种ui，但是大部分教程都是以同色背景糊弄的形式制作出的一个假凹槽，这是非常不好的，我来教大家如何使用svg绘制一个真正的凹槽ui

（气死我了，上b站找半天视频发现做的全是假的(`へ´≠) ）

不多废话，先放上我做的效果图，完整代码在最下面

颜色丑了一些，为了让效果更清晰，并且做了一个鼠标跟随的圆，证明这个是真正的凹槽，而不是用背景颜色糊弄人，svg还支持过渡动效，制作起来很方便，到时候可以换成自己喜欢的颜色

原理非常简单

1. 一个svg背景

2. 一个绝对定位的圆

3. 添加动效

如何绘制svg

需要知道的几个参数（具体的需要的时候查一下就行，我就不写的太详细了）

M：x , y --> 将笔移动到路径的起点坐标（x ，y），不绘制任何内容，用于设置初始状态

H：x --> 水平线至x，绘制一条水平线，y坐标保持在0

Q：控制点 , 终点 --> 二次贝塞尔曲线

A：半径 , 旋转 , 大圆弧标志 , 扫描标志 , 终点 --> 画圆弧

V：y --> 垂直线至y，绘制一条垂直线

Z：闭合路径

尝试绘制第一个图形

先画出自己要绘制图形的坐标

我画的太抽象了，对不起喵，实在是画不出来QAQ

下面是这个svg图案的代码

总体思路就是

0. 先设置总宽高为100 56按自己需要设置即可

1. 先确定起始路径点，设为（0，0）这个坐标系长上面那样，所以 M 0 0

2. 绘制一个向右15px长度的一条水平线 H 15 [意思就是从当前点绘制到x = 15的位置]

3. 绘制弯曲弧度，需要用到二次贝塞尔曲线，当前位置 + 控制点 + 终点（由于默认从前一个点开始画，所以只需要传递两个参数，控制点为（30，0），终点为（30，8））Q 30 0 30 8

4. 然后现在需要画一个半圆，先设置圆的半径，x20 y20 然后剩下的参数设为0 0 0（具体这三个参数是做什么的我也没试过，也不重要啦反正）然后设置绘制终点为（70，8）为什么是70呢，因为绘制点在（30，8）30+半径*2 = 30 + 20 + 20 = 70，所以是（70，8）A 20 20 0 0 0 70 8

5. 然后再绘制一个贝塞尔曲线，现在点在（70，8）所以指定（70，0）和（85，0）就和先前画的曲线一样了 Q 70 0 85 0

6. 绘制一个到最右边的直线，宽度为100，所以设置H 100即可

7. 再画一个垂直线 V 56

8. 再画回来，从当前点画到0的位置 H 0

9. 最后封口 Z

如果没有看懂的画我们再来画一个图