web-dev-qa-db-ja.com

反応を使用してグループ要素（svg）にonClickイベントを追加します

OnClickイベントを既存のsvgに追加しようとしています。今私はこれを持っています：

<g id="Group" onClick={this.clickGroup.bind(this, 1)}>

これは多少は機能しますが、完全にではありません...グループをクリックするとイベントが発生しますが、クリック可能な「ゾーン」はクリック可能にしたいグループとは異なります（完全にランダムなようです）私に）。

<g>elementにイベントを追加するより良い方法はありますか（React？）？

javascriptreactjssvgdom-events
17
Clafou

g要素は単なる空のコンテナーです。イベントを単独で発生させることはできません。

この例 を実行すると、click要素の子をクリックすることでgイベントをトリガーできることがわかりますが、それらの間の空きスペースをクリックします。

SVGでイベントを発生させるには、実際の形状を使用する必要があります。

20
Anthony Dugois

スタイルポインターイベントを境界ボックスとして使用して、グループの任意の場所をクリックできるようにします。空の場所でも

<g id="Group" onClick={this.clickGroup.bind(this, 1)} style="pointer-events: bounding-box;">
15
Nirmalya Kar