dom - Click event does not work on the mark-end of path in SVG

Question

I create a simple path in SVG, and use the mark-end attribute for creating an arrow line. Then I bind the click event to the path.

I found the click event was not triggered while I click on the marker area. How to fix this issue?

Answer 1

According to the spec, this should be considered a given.

11.6.4 Details on how markers are rendered

[...]

The rendering effect of a marker is as if the contents of the referenced ‘marker’ element were deeply cloned into a separate non-exposed DOM tree for each instance of the marker. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance of the marker.

When a pointer event occurs, hit-testing will be performed by traversing the SVG's DOM tree, thus leaving out any shadow DOM trees, which are non-exposed. That's why there is no chance for marker instances to ever become a target of pointer events.

For clarification it might be interesting to note, that the same holds true when it comes to styling marker instances via CSS rules, which is not feasible. Only the original marker elements, i.e. the declaring <marker> elements, are stylable using CSS, whereas the cloned instances referenced via properties marker-start, marker-mid, or marker-end are not accessible and therefore not individually stylable.

CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.