使用SVG實現提示框功能的示例代碼

2024-09-06 19:57:13

字體：大中小

來源：轉載

供稿：網友

NO.1

前言

Tooltips常被稱為提示框（或信息提示框），提示框能夠以較強的交互性、自由度為用戶提供相應的提示信息。今天我們要聊的不是如何實現強大的交互行為，而是來看看如何以最好的方式來還原他們的視覺效果，并且能適用于不同的場景。

NO.2

背景

上圖是從平時工作場景碰到的UI效果截圖過來的。上圖中展示的Tooltips框基本上覆蓋了常見的UI風格。簡單的來歸納一下：

帶邊框的提示框
純色（或帶透明度純色）的提示框
帶內陰影（或外陰影）的提示框
帶邊框+漸變的提示框
帶邊框+透明度背景的提示框
提示框三角帶圓角和陰影的提示框

可能還有我未碰到的提示框UI風格。面對這么多的UI風格，對于前端實現上來說是具有一定的挑戰性，特別是多種效果組合在一起的。比如說，帶有邊框+內外陰影+漸變（或透明度）+圓角三角等?；旧辖M合了上圖所提到的各種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 （橢圓?。?/td>	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R	Catmull-Rom curveto* （Catmull-Rom曲線）	x1 y1 (x y)+

貝塞爾曲線

在SVGpath命令中我個人認為最精髓的部分是貝塞爾曲線，貝塞爾能畫出各種令人愉悅的曲線。

貝塞爾曲線完全由其控制點決定其形狀,ｎ個控制點對應著ｎ－１階的貝塞爾曲線，并且可以通過遞歸的方式來繪制。我們先看下一次和二次貝塞爾曲線如何來繪制的：

一次曲線：

一條直線上，隨著時間t的變化，紅色線段的那個點的坐標公式應該如下：

二次貝塞爾曲線：

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="http://www.w3.org/2000/svg">   <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="http://www.w3.org/2000/svg">  <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>