Javascript React（JS）当前是否可以在React中的url引用标记svg元素上触发事件？

我正在写一个组件库。 我希望允许用户使用事件与组件进行交互，例如，定义单击的事件处理程序（在箭头主体或其头部）

请先查看该问题的演示：
您可以在Path元素fire上看到事件，但在Marker上看不到

那么问题是什么呢？ 简言之，marker元素中定义的事件处理程序无法启动，因此用户无法与箭头交互

简言之： arrow组件是svg元素，包含绘制主体的path元素和绘制箭头头部的marker元素。 path元素是作为svg元素的子元素动态呈现的，因此将事件处理程序附加到它不会有问题。 然而，标记元素his通过

markerEnd={'url（#headArrow）}

附加到path元素的末尾，当我尝试向标记添加事件处理程序时，它就是不起作用

我认为是什么导致了这个问题？ marker元素不作为path元素的子元素呈现，而是在前面声明，然后由

markerEnd

属性和url引用

那么，为什么不将marker元素作为path元素的子组件进行渲染呢？SVG2的新草案中提供了这一功能（请参见

定位标记

）——但大多数浏览器尚未植入该功能，因此做出了反应（可能永远也不会实现该功能）——因此我目前仍坚持使用URL引用方法

建议？ 我能做什么？除了尝试在不使用marker SVG元素的情况下实现head之外，我想不出任何解决方案，但这将很困难，而且我将失去marker元素提供的可定制的道具

任何关于如何将工作事件处理程序附加到被引用的SVG标记元素的帮助都将不胜感激

来自

无法与标记交互。例如，当鼠标在渲染标记上单击或移动时，不会将click或mouseover等事件分派给“标记”或其子级

---

：（

您应该将此作为一条评论-这不是答案。