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

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示例如下：

<svg width="190px" height="160px" version="1.1" xmlns=""> <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> </svg>

通过设置起始点和调整控制点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 width="120" height="240" version="1.1" xmlns=""> <defs> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </linearGradient> </defs> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> </svg>

将这个渐变作用到我们提示框后可以看到如下图的效果，终于不用辛辛苦苦的处理尖角的渐变衔接问题了。

更多

SVG同时也支持纹理叠加效果，具体感兴趣的可以自行去研究下。

NO.7

需求还没完

上面方案落地到项目中后，可能是我们不经意感动了设计师，最近的需求视觉稿中我们发现其中涉及到的Tooltips样式已经越发令人惊艳。简单列举如下两个样式：

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!