SVG图标在单击时突出显示移动设备中的问题
SVG图标在单击时突出显示移动设备中的问题
提问于 2017-07-04 16:31:42
我在我的网页中使用了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>回答 1
Stack Overflow用户
发布于 2017-07-04 17:34:33
首先，这不是SVG本身的问题，而是页面上可点击("tapable")元素的一般行为。无论它是一个链接，还是只是一个在活动时更改的元素，它都会突出显示，以表明它是可用的。
为了删除它(如果你愿意，也可以修改它)，我通常使用CSS技巧中的这个解决方案，并推荐它：
-webkit-tap-highlight-color: rgba(0,0,0,0);这是CSS Tricks上的链接
这不是一个标准的解决方案：MDN
当心cursor: pointer可能会阻止它工作！
如果你需要更广泛和更安全的支持，我会研究一下:active和:focus的调整，也许能找到一些后备方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44900875
复制相关文章
相似问题
腾讯云开发者
