在React中为一个组元素（svg）添加onClick事件

Question

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

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

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

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

- Clafouti

Answer 1

使用样式 pointer-events: bounding-box，使组在任何位置都可点击。即使在空白处也可以。

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

- Nirmalya Kar

---

答案框只用于完整回答问题。这似乎更适合作为评论。改变文本，使其直接回答所提出的问题，可以提高答案的长期价值，并有助于在审核期间防止其被删除。 - NightOwl888

我害怕这个答案只是一条评论。我刚花了两个小时试图弄清楚如何使一个g元素在其祖先之一上的onClick处理程序实际成为目标。这个答案是突破口。 - Izhaki

“pointer-events: bounding-box”尽管没有记录文档 - stropitek

不支持Safari浏览器 - Ryan

Answer 2

一个 g 元素只是一个空的容器，它本身不能触发事件。

如果你运行这个例子，你会发现你可以通过点击 g 元素的子元素来触发 click 事件，但如果你在它们之间的空白区域点击，则无法触发。

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

- Anthony Dugois

---

谢谢你的帮助。这是否意味着最佳解决方案是将形成一个形状的所有路径包装在类似矩形的东西中？ - Clafouti

您可以在形状上方添加一个透明的矩形并在其上附加事件。如果有更优雅的解决方案，我们将很高兴看到它。 - Anthony Dugois

我刚刚在查看SVG文档。似乎可以将事件添加到<g>元素中。请参考这里。 - Shubham

@Shubham 当然可以。但正如@anthony-dugois所说，<g>是一个空容器，因此如果您不使用其他元素填充该容器，则无法从中触发事件。 - Clafouti