点击移动设备中的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调整，如果您需要更广泛和更安全的支持，可能会找到一些回退。