使用SVG实现提示框功能的示例代码

NO.1

前言

Tooltips常被称为提示框（或信息提示框），提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为，而是来看看如何以最好的方式来还原他们的视觉效果，并且能适用于不同的场景。

NO.2

背景

上图是从平时工作场景碰到的UI效果截图过来的。上图中展示的Tooltips框基本上覆盖了常见的UI风格。简单的来归纳一下：

带边框的提示框

纯色（或带透明度纯色）的提示框

带内阴影（或外阴影）的提示框

带边框+渐变的提示框

带边框+透明度背景的提示框

提示框三角带圆角和阴影的提示框

可能还有我未碰到的提示框UI风格。面对这么多的UI风格，对于前端实现上来说是具有一定的挑战性，特别是多种效果组合在一起的。比如说，带有边框+内外阴影+渐变（或透明度）+圆角三角等。基本上组合了上图所提到的各种UI风格。

NO.3

clip-path方案

通常上图的实现是使用CSS画个尖角来拼接上去，比较优秀的方案如下图:

我们简单介绍下clip-path方案：

把提示框分成两个部分，一个是四方形，一个是三角形，然后两个拼接在一起组合成一个提示框。这样整个坐标示意图如下：

假设提示框的尺寸是w x h，边框厚度是h1，那么绘制带有缺口的时需要以下几个坐标点：

d1坐标(0, 0)

d2坐标((50% - b), 0)或((w / 2 - b), 0)其中b是三角形对角边长度的一半，后面会介绍到

d3坐标((50% - b - h1), h1)或((w / 2 - b - h1), h1)

d4坐标((50% + b + h1), h1)或((w / 2 + b + h1), h1)

d5坐标((50% + b), 0)或((w / 2 + b), 0)

d6坐标(100%, 0)或(w, 0)

d7坐标(100%, 100%)或(w, h)

d8坐标(0, 100%)或(0, h)

坐标点放置到clip-path的polygon()函数中，最终剪切之后的图形看上去像下图

clip-path: polygon( 0 0, calc(50% - 4px) 0, calc(50% - 7px) 2px, calc(50% + 7px) 2px, calc(50% + 4px) 0, 100% 0, 100% 100%, 0 100%, 0 0);

另外就是三角形的部分，如果我们的三角形是一个10px x 10px旋转45deg得到。根据一些三角函数的公式和已知的正方形边长就可以计算出正方形斜对角的长度：

NO.4

clip-path方案碰到问题

这个效果整体看起来还是不错的，但是细看就会发现在接缝处或许会存在有空隙、有重叠的问题，如下图：

采用vw方案后这类像素对不齐的问题也算是司空见惯了，同时第一个Tooltips由于是背景需要从左到右渐变的，此时尖角的渐变过度要和下方的渐变匹配上就更需要费力气了。

由于先前就遇到过此类ToolTip样式问题，告知视觉同学后，体贴的视觉同学修改了一版不带透明度的纯色提示框，然而视觉效果大打折扣。

其实我们对于原先采用CSSclip-path的方案其实也存在很多的缺陷，它在面对带有阴影、背景透明或者渐变、带边框同时出现时就显出了实现成本高和效果一般的缺点。

NO.5

SVG 方案

在讨论中我们想到 SVG的path和这个提示框的样式天然的匹配（建议先了解下path的相关文档），查阅了相关的文档和资料后我们大致得到了使用SVG来实现的如下几个优点：

能轻松满足阴影、背景透明或者渐变、带边框的效果，甚至更为复杂多变的场景

SVG的path实现简单，并且代码量极小

可扩展性，可维护性

参考相关文章后，我们完善Demo工具如下：

使用Demo工具，我们会得到path的数据大致如下:

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)+  

贝塞尔曲线

在SVGpath命令中我个人认为最精髓的部分是贝塞尔曲线，贝塞尔能画出各种令人愉悦的曲线。

贝塞尔曲线完全由其控制点决定其形状,ｎ个控制点对应着ｎ－１阶的贝塞尔曲线，并且可以通过递归的方式来绘制。我们先看下一次和二次贝塞尔曲线如何来绘制的：

一次曲线：

一条直线上，随着时间t的变化，红色线段的那个点的坐标公式应该如下：

二次贝塞尔曲线：

（编辑：ASP站长网）