javascript - SVGテキスト要素を「クリックスルー可能」にする方法は?

Question

場所に名前を付けるための SVG テキスト要素を含むマップがあります。場所（形状）をクリック可能にしたいのですが、テキスト要素がその上にあるため、誰かがテキスト要素にカーソルを合わせてクリックしても、形状がクリックされていないため何も起こりません：テキスト要素は. テキスト要素がクリックされた場合、クリックがそれを「通過」して形状に到達するようにするにはどうすればよいですか?

Answer 1

Mozilla は、この目的のためにpointer-eventsと呼ばれる CSS プロパティを導入しました。当初は SVG 形状に限定されていましたが、現在では最新のブラウザーのほとんどの DOM 要素でサポートされています。

span.label { pointer-events: none; }

• https://developer.mozilla.org/en-US/docs/CSS/pointer-events
• http://caniuse.com/pointer-events

この質問に対する答えには、古い IE で同じ結果を達成するための良い情報があります。

IE の CSS 'pointer-events' プロパティの代替

Answer 2

この CSS をテキストに追加します。

pointer-events: none;