CODEWITHSUNDEEP
javascriptreactjssvgdom-events
Clafouti
Clafouti

Reputation: 4595

Add onClick event to a group element (svg) with react

I'm trying to add an onClick event to an existing svg. Right now I have this :

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

Which somewhat works but not entirely... The event fires when I click the group but the "zone" that is clickable isn't the same as the group I want to be clickable (it seems completely random to me).

Is there any better way to add events to a <g>element (with React ?) ?

Upvotes: 28

Views: 29443

Answers (2)

Nirmalya Kar
Nirmalya Kar

Reputation: 563

Use style pointer-events as bounding-box to make the group clickable any where on the group.Even at the empty places

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

Upvotes: 39

Anthony Dugois
Anthony Dugois

Reputation: 2052

A g element is just an empty container; it can not fire events by itself.

If you run this example, you'll see that you can trigger the click event by clicking on the children of the g element, but you can't if you click in the empty space between them.

You have to use actual shapes to fire events in SVG.

Upvotes: 31

Related Questions