CODEWITHSUNDEEP
javascripthtmlreactjssvg
Eliav Louski
Eliav Louski

Reputation: 5294

React(JS) is it currently possible to fire event on a url referenced marker svg element in React?

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).

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.

so what is the problem?

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.

not in short:

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.

what I think is causing the problem?

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.

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.

suggestions?

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.

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

Upvotes: 1

Views: 178

Answers (1)

Harris Konstantourakis
Harris Konstantourakis

Reputation: 239

From w3c

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.

:(

Upvotes: 1

Related Questions