Menu
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 ?) ?
496
The onclick attribute specifies some script to run when the element is clicked. You can use this attribute with the following SVG elements: <a> <altGlyph>
React events are written in camelCase syntax: onClick instead of onclick . React event handlers are written inside curly braces: onClick={shoot} instead of onClick="shoot()" .
The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.
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;">
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.
30
answered Oct 16 '22 23:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
