我正在编写一个 React 图形箭头组件库。我想允许用户通过事件与组件进行交互，例如，定义单击的事件处理程序（在箭头的主体上，或他的头部）。

先看这个问题的演示：https : //codesandbox.io/s/svg-marker-element-ekkkx?file=/src/App.js
你可以看到 Path 元素上的事件触发，但 Marker 上没有。

那么问题是什么？

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

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

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

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

那么为什么不将标记元素渲染为路径元素的子组件呢？此功能在 SVG2 的新草案中可用（请参阅positioned markers 此处） - 但大多数浏览器还没有植入它，React 也是如此（也许永远不会实现它） - 所以我现在坚持使用 URL 引用方法。

建议？

我能做什么？除了尝试在不使用标记 SVG 元素的情况下实现头部之外，我想不出任何解决方案 - 但这会很困难，而且我将失去标记元素提供的可自定义props。

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