行使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样式已经加倍令人惊艳。简朴罗列如下两个样式：

（编辑：湖南网）

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