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

<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样式已经越发令人惊艳。简单列举如下两个样式：

（编辑：PHP编程网 - 黄冈站长网）

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