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

第一版方案我们基于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
H 101
Q 107,-62 107,-56
V -6
Q 107,0 101,0
H 0 z
 

从上方简短的路径能看出，我们的尖角路径是完整的整合在整个SVG气泡路径中的，所以就不会担心会出现CSS的 clip-path 方案的问题。

NO.9

可视化工具

方案看起来好像已经搞定了需求中的尖角样式，然而你可能会说这尖角路径是如何产生，难道需要通过强大的数学能力推导出来？如下三次贝塞尔曲线就已经不敢直视了，更何况四次、五次...

所以想配合的我们一定要产出可视化工具来实现这路径生成过程，得益于D3.js工具库操作SVG方面的强大功能，我们开发完的 生成工具地址 (https://market.m.taobao.com/app/fdilab/svg-tool-demo/pages/index/index.html) 如下：

对于熟悉SVG的path命令的同学来说这个操作不难，如果不熟悉的推荐看下下方的参考文章，了解了曲线命令后就能画出圆滑的曲线。

10

总结

至此在ToolTips这块基本已经满足了设计的需求，同时也沉淀了SVG路径生成工具。使用SVG来实现ToolTips能覆盖 CSSclip-path不能完美解决的几个场景。在此特别感谢大漠老师的指导。

11

参考文章

D3官网(https://d3js.org.cn/)

曲线篇: 贝塞尔曲线(https://zhuanlan.zhihu.com/p/136647181 )

Tooltips using SVG Path(https://medium.com/welldone-software/tooltips-using-svg-path-1bd69cc7becd )

SVG渐变(https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients )

深度掌握SVG路径path的贝塞尔曲线指令(https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/ )

css drop-shadow(https://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/ )

到此这篇关于使用SVG实现提示框功能的示例代码的文章就介绍到这了,更多相关svg 提示框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：ASP站长网）