使用react将onClick事件添加到组元素(svg)

Question

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

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

这有点有效但不完全......当我点击组时会触发事件,但可点击的"区域"与我想要点击的组不同(对我来说似乎完全随机).

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

Answer 1

甲g元件是一个空的容器; 它不能自己发射事件.

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

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

Answer 2

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

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