場所の名前を付けるためにSVGテキスト要素を持つ地図があります。場所(図形)をクリック可能にしたいのですが、テキスト要素がその上にあるため、テキスト要素をクリックしてクリックすると、図形がクリックされなかったため何も起こりません:テキスト要素は。テキスト要素がクリックされた場合、クリックはその要素を通過して形になるようにするにはどうしたらいいですか?SVGテキスト要素を「クリックスルー可能」にする方法は?
16
A
答えて
41
Mozillaはポインタイベントと呼ばれ、この目的のためのCSSプロパティを導入しました。もともとはSVG形状に限定されていましたが、今は最近のブラウザのほとんどのDOM要素でサポートされています。
span.label { pointer-events: none; }
この質問への答えは上のいくつかの良い情報を持っています古いIEで同じ結果を達成する:
5
は、テキストにこのCSSを追加します。
pointer-events: none;
2
"<g>"要素内のテキストを使用してマップシェイプをグループ化することができれば、シェイプではなくグループにクリックを添付できます。これを行うと、グループに適用された変換の追加の利点が、図形とテキストの両方に適用されます。グループ分けができない場合は、以前の回答が間違いなく最高のショットになることに同意します。基本的に何が起こっているのですか?ほとんどの人がZ-インデックスを下方に貫くクリックを視覚化しますが、そのようには機能しません。クリックはDOMを吹き飛ばすので、テキストがクリックを処理しなければ、親グループまたはコンテナである次のDOM要素にバブルアップします。これは、DOMエレメントの一番上に達するまで上向きになります。
関連する問題
- 1. CSSクラスをSVGテキスト要素に適用する方法
- 2. SVGテキスト要素の速度
- 3. d3 javascriptのSVGテキスト要素に一意のIDを割り当てる方法
- 4. クリックコマンドでSVGパス要素を別のSVGパス要素に変換する方法は?
- 5. アコーディオン要素をソート可能かつドラッグ可能にする方法
- 6. jQuery上のテキスト選択を許可する方法DragSort要素
- 7. d3.jsを使用してSVGテキストをドラッグ可能にする
- 8. SVG要素の内容を別のSVG要素にコピーして同期を維持する方法
- 9. SVG要素を透明にする方法(SVGwebを使用)
- 10. D3のデータSVG要素にアクセスする方法を
- 11. インラインSVG上にHTML要素を配置する方法
- 12. コピー不可能な要素のコンテナを作成する方法
- 13. は、UL要素にLI要素のテキストからクラスを追加する方法
- 14. text-anchor = "start"テキスト要素をsvg要素の先頭に移動しません。
- 15. SVGパス要素
- 16. FireFoxでSVG要素の寸法を取得するには?
- 17. Svg要素の交差をチェックする方法
- 18. 他のsvg要素ではなく、テキストのアスペクト比を固定する方法はありますか?
- 19. d3のrect要素にテキストを配置する方法は?
- 20. テキスト領域の要素にサイズ変更可能
- 21. テキストを選択可能にする方法は?
- 22. Phonegapに組み込まれたアプリケーション - 要素をドラッグ可能にする方法
- 23. クリック可能な領域の上にある要素を処理する方法
- 24. 要素にズーム - jquery SVG
- 25. SVG要素のouterHTML
- 26. SVG要素のツールチップ
- 27. jQuery SVGからテキスト/フォームを送信しますか?可能?
- 28. Is:not(:ホバー)と:アクセス可能な要素を隠す安全な方法に乗る?
- 29. 要素が削除可能か、ドラッグ可能か、その他の「ble」かどうかをチェックする方法は?
- 30. アコーディオン要素はリンク可能ですか?
COOLは、SVGで動作していたことを知らなかった "普通の"要素だけを返す – Cystack
@Cystack 'ポインタイベント'プロパティはSVGの最初の部分でSVGに含まれていました(そして、 Mozillaはsvgの外でこのプロパティの使用を開拓しましたが)。最初のリンクには「警告:非SVG要素に対するCSSのポインタイベントの使用は実験的です」と書かれています。 –
また、ポインタイベントはIE9 + AFAIKのSVGコンテンツで機能します。 –