React(JS)当前是否可以在React中的url引用标记svg元素上触发事件? [英] React(JS) is it currently possible to fire event on a url referenced marker svg element in React?

问题描述

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

I'm writing a React graphical arrows components library. I want to permit the user to interact with the component with events, for example, defining event handler of a click(on the body of the arrow, or his head).

首先查看该问题的演示: https ://codesandbox.io/s/svg-marker-element-ekkkx?file =/src/App.js
您可以在Path元素上看到事件，但是Marker上没有.

see demo of the issue first: https://codesandbox.io/s/svg-marker-element-ekkkx?file=/src/App.js
you can see the events on the Path element fire but on the Marker does not.

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

in short - the event handlers defined in the marker element just doesn't fire - so the user just cant interact with the head of the arrow.

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

the arrow component is svg element containing path element which draws the body, and a marker element that draws the head of the arrow. the path element is rendered on the fly as child of the svg element so no problem attaching event handlers to it. however - the marker element his attached to the end of the path element by markerEnd={'url(#headArrow)'}, and when I try to add event handlers to the marker it just doesn't work.

marker元素不会呈现为path元素的子元素，而是先声明，然后由markerEnd属性和url引用.

the marker element does not render as child of the path element, but declared earlier and then referenced by the markerEnd property and a url.

那么为什么不仅仅将marker元素呈现为path元素的子组件呢?此功能在SVG2的新草案中可用(请参见positioned markers 此处)-但大多数浏览器还没有植入它，React也没有植入它(也许永远不会实现它)-因此我暂时坚持使用URL引用方法.

so why not just render the marker element as a child component of the path element? this feature is available on the new drafts of SVG2 (see positioned markers here) - but most of the browsers did not implant it yet and so do React(and maybe will never implement it) - so I stuck with the URL reference method for now.

我该怎么办?我想不出任何解决方案，除非尝试不使用标记SVG元素来实现头部-但这将很困难，而且我将失去标记元素提供的可定制道具.

what can I do? I can't think of any solution except to maybe try to implement the head without the use of marker SVG element - but it will be difficult and i will lose the customizable props the marker element offers.

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

any help in figuring out how to attach a working event handler to the referenced SVG Marker element will be very appreciated!

推荐答案

来自 w3c

标记不能与之交互.例如，当鼠标在渲染的标记上单击或移动时，诸如click或mouseover之类的事件不会调度到"marker"或其子代.

Markers cannot be interacted with. Events such as click or mouseover, for example, are not dispatched to a ‘marker’ or its children when the mouse is clicked or moved over a rendered marker.

:(

这篇关于React(JS)当前是否可以在React中的url引用标记svg元素上触发事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！