Thêm sự kiện onClick vào phần tử nhóm (svg) với phản hồi

Question

Tôi đang cố gắng thêm sự kiện onClick vào svg hiện có. Ngay bây giờ tôi có điều này:

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

nào hơi công trình nhưng không hoàn toàn ... Các sự kiện cháy khi tôi nhấp vào nhóm nhưng "vùng" đó là nhấp được là không giống như nhóm tôi muốn để có thể nhấp (có vẻ như hoàn toàn ngẫu nhiên đối với tôi).

Có cách nào tốt hơn để thêm sự kiện vào thành phần <g> (với React?) Không?

Answer 1

Phần tử g chỉ là vùng chứa trống; nó không thể tự cháy các sự kiện.

Nếu bạn chạy this example, bạn sẽ thấy rằng bạn có thể kích hoạt sự kiện click bằng cách nhấp vào con của phần tử g, nhưng bạn không thể nếu bạn nhấp vào khoảng trống giữa chúng.

Bạn phải sử dụng hình dạng thực để kích hoạt sự kiện trong SVG.