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を調べて、より幅広くより安全なサポートが必要な場合は、多少のフォールバックを見つけるよう調整しました。