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

EN

我正在编写一个React图形箭头组件库。我希望允许用户通过事件与组件交互，例如，定义单击的事件处理程序(在箭头的身体或头部)。

先看这个问题的演示：https://codesandbox.io/s/svg-marker-element-ekkkx?file=/src/App.js

您可以在Path元素上看到触发的事件，但在Marker上看不到。

那么问题出在哪里呢？

简而言之，标记元素中定义的事件处理程序不会触发，因此用户无法与箭头的头部进行交互。

不是简而言之：

箭头组件是svg元素，其中包含绘制主体的path元素和绘制箭头头部的marker元素。path元素是作为svg元素的子元素动态呈现的，因此将事件处理程序附加到它是没有问题的。但是-标记元素由markerEnd={'url(#headArrow)'}附加到path元素的末尾，当我尝试向标记添加事件处理程序时，它就不起作用了。

我认为是什么导致了这个问题？

标记元素不会呈现为path元素的子元素，而是在前面声明的，然后由markerEnd属性和url引用。

那么，为什么不直接将标记元素呈现为path元素的子组件呢？这个特性在SVG2的新草案中是可用的(参见positioned markers here) --但是大多数浏览器还没有植入它，所以React(也许永远也不会实现它)--所以我现在坚持使用URL引用方法。

有什么建议吗？

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

在弄清楚如何将工作事件处理程序附加到所引用的SVG标记元素上的任何帮助都将不胜感激！