<use>要素を使用すると、SVGクリックイベントが発生しない/バブルしない
興味深いバグ（？）に遭遇しました。リンク（たとえばアイコン）の一部として<use>を使用してSVGを埋め込むと、アイコン自体はjQueryでクリックイベントを登録しませんが、テキストをクリックすると登録します。これは、SVGイベントが発生しないためだと思いますか？
SVGを直接埋め込むと、テキストまたはアイコンのどちらをクリックしたかに関係なく、リンクがトリガーされます。
私が作成した簡単なテストケースは次のとおりです： SVG <use>バグテストケース 。
使用する pointer-events: none; svgで。それは私のために働いた。
要素がマウスイベントのターゲットになることはありません。ただし、それらの子孫が他の値に設定されたポインターイベントを持っている場合、マウスイベントはその子孫要素をターゲットにすることができます。これらの状況では、マウスイベントは、イベントキャプチャー/バブルフェーズ中に、子孫への/子孫からの途中で適切にこの親要素のイベントリスナーをトリガーします。
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
私も同じ問題を抱えていました。私が使用する修正は、透過的なdivをsvgの上に置くことです。しかし、それはもちろん理想的ではありません。
同じ問題が発生し、display: blockまたはdisplay: inline-blockリンク上で動作しました。