點擊移動設備中的SVG圖標突出顯示問題

Question

我在我的網頁中使用了SVG圖標。當我從手機瀏覽器點擊它時，瀏覽器會在圖標上突出顯示。 我可以禁用突出顯示嗎？

例子： highlight

代碼：

所有的

<div class="ictg-before"> 
<svg fill="#262626" height="72" viewBox="0 0 24 24" width="72" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"></path> 
    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"></path> 
</svg></div> 

Answer 1

首先，它不與SVG本身的事情，但可點擊（ 「tapable」）網頁上的元素的一般行爲。無論它是鏈接還是僅在活動時發生更改的元素，它都會突出顯示它可用。

要刪除它（或改變它，如果你願意的話），我一般使用來自CSS技巧這個解決方案，並建議其：

-webkit-tap-highlight-color: rgba(0,0,0,0); 

這裏是CSS Tricks

鏈接它不是一個標準解決方案tho：MDN

當心cursor: pointer可能會阻止工作！

我會調查:active和:focus調整，如果您需要更廣泛和更安全的支持，可能會找到一些回退。