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

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

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

这有点有效，但不完全有效。。。当我单击组时，事件会触发，但可单击的“区域”与我希望可单击的组不同（我觉得这完全是随机的）

---

有没有更好的方法将事件添加到

元素（使用React？）中？

a

g

元素只是一个空容器；它不能单独触发事件

如果运行，您将看到可以通过单击

g

元素的子元素来触发

click

事件，但如果在它们之间的空白处单击，则无法触发该事件

---

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

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

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

谢谢您的帮助。这是否意味着最好的解决方案是将形成形状的所有路径包装在类似矩形的东西中？您可以在形状顶部添加一个透明矩形，并在其上附加一个事件。如果有人有一个更优雅的解决方案，我会很高兴看到它。我刚刚浏览了svg文档。似乎可以将事件添加到元素中。请参考@Shubham，确实可以。但正如@anthony dugois所说，

是一个空容器，因此如果您不使用其他元素填充该容器，您将无法从中触发事件。答案框仅用于完整回答问题。这感觉更适合作为评论。更改文本，使其直接解决所提出的问题，可以提高答案的长期价值，并有助于防止在审阅过程中将其删除。我担心这个答案会成为评论。我刚刚花了两个小时试图弄清楚当

onClick

处理程序位于它的一个祖先上时，

g

元素如何成为实际的目标。这个答案是一个突破。

指针事件：边界框

没有文档记录