使用react将onClick事件添加到组元素（svg）

Question

我正在尝试将onClick事件添加到现有的svg。 现在我有这个：

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

这有点有效但不完全......当我点击组时会触发事件，但可点击的“区域”与我想要点击的组不同（对我来说似乎完全随机）。

有没有更好的方法将事件添加到<g>元素（使用React？）？

Answer 1

g元素只是一个空容器; 它不能自己发射事件。

如果运行此示例 ，您将看到可以通过单击g元素的子元素来触发click事件，但如果单击它们之间的空白区域则无法触发。

您必须使用实际形状来在SVG中触发事件。

Answer 2

使用样式指针事件作为边界框，使组可以在组中的任何位置单击。即使在空的位置

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