在SVG黑科技排版中插入視頻號(hào)是比較常見的排版效果，為了讓SVG排版效果更加美觀，我們會(huì)對(duì)視頻號(hào)進(jìn)行“美化處理”，也就是視頻號(hào)美化。

大家可能平時(shí)沒有去關(guān)注發(fā)現(xiàn)，安卓手機(jī)點(diǎn)擊視頻號(hào)、地圖等的時(shí)候會(huì)出現(xiàn)高亮“藍(lán)色”背景，影響SVG排版的美觀，懂點(diǎn)君今天來給大家分享如何解決視頻號(hào)高亮背景的問題。先來說說視頻號(hào)美化原理，我們才好理解如何解決這個(gè)問題。

視頻號(hào)美化原理：通過零高容器創(chuàng)建兩個(gè)疊層，最上層是放一張圖片，底下的層放視頻號(hào)，并對(duì)視頻號(hào)進(jìn)行縮放移動(dòng)調(diào)整點(diǎn)擊區(qū)域和透明處理隱藏起來。用戶看到的是一張圖片，看不到真實(shí)的視頻號(hào)，點(diǎn)擊的時(shí)候，觸發(fā)的是底下的視頻號(hào)，然后進(jìn)行跳轉(zhuǎn)。

高亮問題

懂點(diǎn)君發(fā)現(xiàn)視頻號(hào)美化之后，在安卓手機(jī)上點(diǎn)擊跳轉(zhuǎn)的時(shí)候會(huì)出現(xiàn)高亮“藍(lán)色”背景，而且圖片無法蓋住這個(gè)藍(lán)色背景，有點(diǎn)影響SVG排版的美觀，具體查看如下動(dòng)圖。

高亮原因

HTML元素設(shè)置CSS cursor樣式屬性之后，在移動(dòng)端點(diǎn)擊該元素，元素會(huì)產(chǎn)生高亮的背景（高亮背景是系統(tǒng)給用戶一個(gè)反饋，讓用戶知道你的點(diǎn)擊是有效果的）。

cursor屬性：定義了鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀，pointer值對(duì)應(yīng)的是小手。

我們插入視頻號(hào)之后，視頻號(hào)自己就加上了cursor屬性，因?yàn)槭枪娞?hào)自動(dòng)添加生成，我們無法手動(dòng)刪除該屬性。

解決高亮

解決原理：在SVG排版美化視頻號(hào)時(shí)給視頻號(hào)容器設(shè)置cursor樣式屬性，然后再設(shè)置高亮tap-highlight-color的值為透明（transparent），用戶點(diǎn)擊的時(shí)候高亮背景是有顯示，只是透明掉了用戶無法看到而已。

懂點(diǎn)君寫出了核心代碼：