M 0,0 L -15,-15 H -79 Q -84,-15 -84,-20 V -85 Q -84,-90-79,-90
H 61 Q 66,-90 66,-85 V -20 Q 66,-15 61,-15 H 15 z
通常使用SVG画path时用到命令如下表：
| 命令 | 名称 | 参数 |
| — | — | — |
| M | moveto(移动到) | (x y)+ |
| Z | closepath（关闭路径） | (none) |
| L | lineto（画线到） | (x y)+ |
| H | horizontal lineto（水平线到） | x+ |
| V | vertical lineto （垂直线到） | y+ |
| C | curveto（三次贝塞尔曲线到） | (x1 y1 x2 y2 x y)+ |
| S | smooth curveto（光滑三次贝塞尔曲线到） | (x2 y2 x y)+ |
| Q | quadratic Bézier curveto（二次贝塞尔曲线到） | (x1 y1 x y)+ |
| T | smooth quadratic Bézier curveto（光滑二次贝塞尔曲线到） | (x y)+ |
| A | elliptical arc （椭圆弧） | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom curveto* （Catmull-Rom曲线） | x1 y1 (x y)+ |
贝塞尔曲线
在SVG path 命令中我个人认为最精髓的部分是贝塞尔曲线，贝塞尔能画出各种令人愉悦的曲线。
贝塞尔曲线完全由其控制点决定其形状, ｎ个控制点对应着ｎ－１阶的贝塞尔曲线，并且可以**通过递归的方式来绘制。**我们先看下一次和二次贝塞尔曲线如何来绘制的：
一次曲线：
一条直线上，随着时间t的变化，红色线段的那个点的坐标公式应该如下：
二次贝塞尔曲线：
p0、p1、p2是3个不共线的点，依次用线段连接，此时随意取线段p0p1上的一个点p0' , 如上图: 我们的p0'点在p0p1线段的0.26处（t=0.26）,此刻p1p2线段相同比列取p1'点，此时p0'和p1'连接后形成线段p0'p1', 在按照如上比列进行取值 p0'', 这时候就确定了二次贝塞尔曲线的一个点。
通过一番巴拉巴拉牛逼的推导后，二次贝塞尔曲线公式为：
N次贝塞尔可以认为是如上取值方式的迭代过程，可以通过下图直观的感受到1~4次曲线随着时间t的变化过程，具体N次贝塞尔曲线的公式可以参考下方关于曲线的文章
SVG中的Q命令
回到我们的ToolTips 话题, 其中的圆角是可以通过二次贝塞尔曲线来实现，SVG中 Q 命令就是来实现二次贝塞尔曲线的，SVG中 Q 命令的示例图如下：
对应的指令,其中x1,y1就是我们上面提到的p1点：
Q x1 y1, x y
二次贝塞尔曲线 Q 示例如下：
通过设置起始点和调整控制点p1 我们能得到我们想要的圆角，如下图所示，小圆点为我们的p1控制点
NO.6
样式设置
实现了上方的SVG后接下来的透明、背景渐变、阴影、边框的设置就都不成问题了。
背景透明
path {
fill: rgba(0,0,0, .3);
storke: #ffffff;
storke-width: 1px
}
阴影
svg {
filter：drop-shadow(2px 4px 6px black)
}
关于为何使用drop-shadow来实现阴影，可以看下图使用了box-shadow和drop-shadow效果区别，
使用box-shadow的时候我们的尖角部分没有阴影，气泡框部分是有阴影的，就会出现下图所示的情况，而使用drop-shadow 就能符合我们尖角和气泡框都有阴影的要求。
背景渐变
SVG不仅支持简单的填充，还支持线性渐变和径向渐变以及图形纹理等。为了让渐变能被重复使用，渐变内容需要定义在标签内部。
如下图是径向渐变的演示：
将这个渐变作用到我们提示框后可以看到如下图的效果，终于不用辛辛苦苦的处理尖角的渐变衔接问题了。
更多
SVG同时也支持纹理叠加效果，具体感兴趣的可以自行去研究下。
NO.7
需求还没完
上面方案落地到项目中后，可能是我们不经意感动了设计师，最近的需求视觉稿中我们发现其中涉及到的Tooltips样式已经越发令人惊艳。简单列举如下两个样式：
第一版方案我们基于Demo工具演示我们已经产出了ToolTips的SDK, 我们使用的单个参数arrowHeight传入来生成尖角。在应付上方两个样式是不可能的，尖角样式多变，如何来扩展性和易用性成为了一个问题，不可能多变的尖角样式都开发一个SDK。
NO.8
方案改进
要应付多变的气泡尖角一定要想办法把尖角抽离出原先的气泡外层路径，生成尖角路径后在整合到气泡上形成一个完整的闭合路径。
为了简单处理数值，我将原先的尖角 (0，0) 坐标定义更换到下方图示点：
所以接下来尖角可以自由设计了，只要保证从**(0，0)**出发最后回到**（-arrowWidth,0）**就行了，如下是一个尖角的路径：（M 0 0 C -10 0 -8 5 -12 5 S -14 0 -24 0）
通过设计不同的尖角路径我们就能组合成不同的气泡样式：
上方右侧的尖角气泡最终给出的路径字符串如下，其中Q -2 7 -9 10 Q -6 5 -7 0 这一段即为我们的尖角路径：
M 0 0
Q -2 7 -9 10 Q -6 5 -7 0
H -110
Q -116,0 -116,-6
V -56
Q -116,-62 -110,-62
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
[外链图片转存中…(img-lQS0QfRN-1710893608329)]
[外链图片转存中…(img-4PIJrdCW-1710893608330)]
[外链图片转存中…(img-tlUy4bV6-1710893608330)]
[外链图片转存中…(img-am1jZuOQ-1710893608331)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-GJkeybT6-1710893608332)]
4498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
