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

Question

場所の名前を付けるためにSVGテキスト要素を持つ地図があります。場所（図形）をクリック可能にしたいのですが、テキスト要素がその上にあるため、テキスト要素をクリックしてクリックすると、図形がクリックされなかったため何も起こりません：テキスト要素は。テキスト要素がクリックされた場合、クリックはその要素を通過して形になるようにするにはどうしたらいいですか？

Answer 1

Mozillaはポインタイベントと呼ばれ、この目的のためのCSSプロパティを導入しました。もともとはSVG形状に限定されていましたが、今は最近のブラウザのほとんどのDOM要素でサポートされています。

span.label { pointer-events: none; } 

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

この質問への答えは上のいくつかの良い情報を持っています古いIEで同じ結果を達成する：

css 'pointer-events' property alternative for IE

Answer 2

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

pointer-events: none; 

Answer 3

"<g>"要素内のテキストを使用してマップシェイプをグループ化することができれば、シェイプではなくグループにクリックを添付できます。これを行うと、グループに適用された変換の追加の利点が、図形とテキストの両方に適用されます。グループ分けができない場合は、以前の回答が間違いなく最高のショットになることに同意します。基本的に何が起こっているのですか？ほとんどの人がZ-インデックスを下方に貫くクリックを視覚化しますが、そのようには機能しません。クリックはDOMを吹き飛ばすので、テキストがクリックを処理しなければ、親グループまたはコンテナである次のDOM要素にバブルアップします。これは、DOMエレメントの一番上に達するまで上向きになります。