dom - 单击事件不适用于 SVG 中路径的标记结束

Question

我在 SVG 中创建了一个简单的路径，并使用 mark-end 属性创建了一条箭头线。然后我将点击事件绑定(bind)到路径。

我发现点击标记区域时没有触发点击事件。如何解决这个问题？

Answer 1

根据规范，这应该被认为是给定的。

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.

当指针事件发生时，将通过遍历 SVG 的 DOM 树执行 HitTest ，从而排除任何未公开的影子 DOM 树。这就是为什么标记实例不可能成为指针事件的目标。

为了澄清，可能需要注意的是，当涉及到通过 CSS 规则设置标记实例的样式时，这同样适用，这是不可行的。只有原始标记元素，即声明 <marker>元素，可使用 CSS 设置样式，而通过属性引用的克隆实例 marker-start , marker-mid , 或 marker-end不可访问，因此不能单独设置样式。

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.