| 命令 | 名稱(chēng) | 參數(shù) |
| M | moveto(移動(dòng)到) | (x y)+ |
| Z | closepath（關(guān)閉路徑） | (none) |
| L | lineto（畫(huà)線(xiàn)到） | (x y)+ |
| H | horizontal lineto（水平線(xiàn)到） | x+ |
| V | vertical lineto （垂直線(xiàn)到） | y+ |
| C | curveto（三次貝塞爾曲線(xiàn)到） | (x1 y1 x2 y2 x y)+ |
| S | smooth curveto（光滑三次貝塞爾曲線(xiàn)到） | (x2 y2 x y)+ |
| Q | quadratic Bézier curveto（二次貝塞爾曲線(xiàn)到） | (x1 y1 x y)+ |
| T | smooth quadratic Bézier curveto（光滑二次貝塞爾曲線(xiàn)到） | (x y)+ |
| A | elliptical arc （橢圓?。?/td> | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom curveto* （Catmull-Rom曲線(xiàn)） | x1 y1 (x y)+ |
貝塞爾曲線(xiàn)
在SVGpath命令中我個(gè)人認(rèn)為最精髓的部分是貝塞爾曲線(xiàn)，貝塞爾能畫(huà)出各種令人愉悅的曲線(xiàn)。
貝塞爾曲線(xiàn)完全由其控制點(diǎn)決定其形狀,ｎ個(gè)控制點(diǎn)對(duì)應(yīng)著ｎ－１階的貝塞爾曲線(xiàn)，并且可以通過(guò)遞歸的方式來(lái)繪制。我們先看下一次和二次貝塞爾曲線(xiàn)如何來(lái)繪制的：
一次曲線(xiàn)：
一條直線(xiàn)上，隨著時(shí)間t的變化，紅色線(xiàn)段的那個(gè)點(diǎn)的坐標(biāo)公式應(yīng)該如下：
二次貝塞爾曲線(xiàn)：
p0、p1、p2是3個(gè)不共線(xiàn)的點(diǎn)，依次用線(xiàn)段連接，此時(shí)隨意取線(xiàn)段p0p1上的一個(gè)點(diǎn)p0', 如上圖: 我們的p0'點(diǎn)在p0p1線(xiàn)段的0.26處（t=0.26）,此刻p1p2線(xiàn)段相同比列取p1'點(diǎn)，此時(shí)p0'和p1'連接后形成線(xiàn)段p0'p1', 在按照如上比列進(jìn)行取值p0'', 這時(shí)候就確定了二次貝塞爾曲線(xiàn)的一個(gè)點(diǎn)。
通過(guò)一番巴拉巴拉牛逼的推導(dǎo)后，二次貝塞爾曲線(xiàn)公式為：
N次貝塞爾可以認(rèn)為是如上取值方式的迭代過(guò)程，可以通過(guò)下圖直觀的感受到1~4次曲線(xiàn)隨著時(shí)間t的變化過(guò)程，具體N次貝塞爾曲線(xiàn)的公式可以參考下方關(guān)于曲線(xiàn)的文章
SVG中的Q命令
回到我們的ToolTips話(huà)題, 其中的圓角是可以通過(guò)二次貝塞爾曲線(xiàn)來(lái)實(shí)現(xiàn)，SVG中Q命令就是來(lái)實(shí)現(xiàn)二次貝塞爾曲線(xiàn)的，SVG中Q命令的示例圖如下：
對(duì)應(yīng)的指令,其中x1,y1就是我們上面提到的p1點(diǎn)：
Q x1 y1, x y
二次貝塞爾曲線(xiàn)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>
通過(guò)設(shè)置起始點(diǎn)和調(diào)整控制點(diǎn)p1我們能得到我們想要的圓角，如下圖所示，小圓點(diǎn)為我們的p1控制點(diǎn)
NO.6
樣式設(shè)置
實(shí)現(xiàn)了上方的SVG后接下來(lái)的透明、背景漸變、陰影、邊框的設(shè)置就都不成問(wèn)題了。
背景透明
path {
fill: rgba(0,0,0, .3);
storke: #ffffff;
storke-width: 1px
}
陰影
svg {
filter：drop-shadow(2px 4px 6px black)
}
關(guān)于為何使用drop-shadow來(lái)實(shí)現(xiàn)陰影，可以看下圖使用了box-shadow和drop-shadow效果區(qū)別，
使用box-shadow的時(shí)候我們的尖角部分沒(méi)有陰影，氣泡框部分是有陰影的，就會(huì)出現(xiàn)下圖所示的情況，而使用drop-shadow就能符合我們尖角和氣泡框都有陰影的要求。
背景漸變
SVG不僅支持簡(jiǎn)單的填充，還支持線(xiàn)性漸變和徑向漸變以及圖形紋理等。為了讓漸變能被重復(fù)使用，漸變內(nèi)容需要定義在標(biāo)簽內(nèi)部。
如下圖是徑向漸變的演示：
<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>
將這個(gè)漸變作用到我們提示框后可以看到如下圖的效果，終于不用辛辛苦苦的處理尖角的漸變銜接問(wèn)題了。
更多
SVG同時(shí)也支持紋理疊加效果，具體感興趣的可以自行去研究下。
NO.7
需求還沒(méi)完
上面方案落地到項(xiàng)目中后，可能是我們不經(jīng)意感動(dòng)了設(shè)計(jì)師，最近的需求視覺(jué)稿中我們發(fā)現(xiàn)其中涉及到的Tooltips樣式已經(jīng)越發(fā)令人驚艷。簡(jiǎn)單列舉如下兩個(gè)樣式：
第一版方案我們基于Demo工具演示我們已經(jīng)產(chǎn)出了ToolTips的SDK, 我們使用的單個(gè)參數(shù)arrowHeight傳入來(lái)生成尖角。在應(yīng)付上方兩個(gè)樣式是不可能的，尖角樣式多變，如何來(lái)擴(kuò)展性和易用性成為了一個(gè)問(wèn)題，不可能多變的尖角樣式都開(kāi)發(fā)一個(gè)SDK。
NO.8
方案改進(jìn)
要應(yīng)付多變的氣泡尖角一定要想辦法把尖角抽離出原先的氣泡外層路徑，生成尖角路徑后在整合到氣泡上形成一個(gè)完整的閉合路徑。
為了簡(jiǎn)單處理數(shù)值，我將原先的尖角(0，0)坐標(biāo)定義更換到下方圖示點(diǎn)：
所以接下來(lái)尖角可以自由設(shè)計(jì)了，只要保證從(0，0)出發(fā)最后回到（-arrowWidth,0）就行了，如下是一個(gè)尖角的路徑：（M 0 0 C -10 0 -8 5 -12 5 S -14 0 -24 0）
通過(guò)設(shè)計(jì)不同的尖角路徑我們就能組合成不同的氣泡樣式：
上方右側(cè)的尖角氣泡最終給出的路徑字符串如下，其中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
從上方簡(jiǎn)短的路徑能看出，我們的尖角路徑是完整的整合在整個(gè)SVG氣泡路徑中的，所以就不會(huì)擔(dān)心會(huì)出現(xiàn)CSS的 clip-path 方案的問(wèn)題。
NO.9
可視化工具
方案看起來(lái)好像已經(jīng)搞定了需求中的尖角樣式，然而你可能會(huì)說(shuō)這尖角路徑是如何產(chǎn)生，難道需要通過(guò)強(qiáng)大的數(shù)學(xué)能力推導(dǎo)出來(lái)？如下三次貝塞爾曲線(xiàn)就已經(jīng)不敢直視了，更何況四次、五次...
所以想配合的我們一定要產(chǎn)出可視化工具來(lái)實(shí)現(xiàn)這路徑生成過(guò)程，得益于D3.js工具庫(kù)操作SVG方面的強(qiáng)大功能，我們開(kāi)發(fā)完的 生成工具地址 (https://market.m.taobao.com/app/fdilab/svg-tool-demo/pages/index/index.html) 如下：
對(duì)于熟悉SVG的path命令的同學(xué)來(lái)說(shuō)這個(gè)操作不難，如果不熟悉的推薦看下下方的參考文章，了解了曲線(xiàn)命令后就能畫(huà)出圓滑的曲線(xiàn)。
10
總結(jié)
至此在ToolTips這塊基本已經(jīng)滿(mǎn)足了設(shè)計(jì)的需求，同時(shí)也沉淀了SVG路徑生成工具。使用SVG來(lái)實(shí)現(xiàn)ToolTips能覆蓋 CSSclip-path不能完美解決的幾個(gè)場(chǎng)景。在此特別感謝大漠老師的指導(dǎo)。
11
參考文章
D3官網(wǎng)(https://d3js.org.cn/)
曲線(xiàn)篇: 貝塞爾曲線(xiàn)(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的貝塞爾曲線(xiàn)指令(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/ )
到此這篇關(guān)于使用SVG實(shí)現(xiàn)提示框功能的示例代碼的文章就介紹到這了,更多相關(guān)svg 提示框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
標(biāo)簽：永州 西藏 青島 棗莊 池州 新疆 遼源 漯河
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《使用SVG實(shí)現(xiàn)提示框功能的示例代碼》，本文關(guān)鍵詞 使用,SVG,實(shí)現(xiàn),提示,框,功能,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。