SVG中的路径标记端点击事件不起作用 [英] Click event does not work on the mark-end of path in SVG
问题描述
我在SVG中创建一个简单的路径，并使用 mark-end 属性创建箭头线。然后我将click事件绑定到路径。
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?
推荐答案
根据规范，这应该被认为是给定的。
According to the spec, this should be considered a given.
11.6.4标记如何呈现的详细信息
[...]
标记的渲染效果就好像所引用的marker元素的内容被深入克隆到每个标记实例的单独的非暴露的DOM树中。因为克隆的DOM树是未公开的，所以SVG DOM不显示标记的克隆实例。
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树将执行命中测试，从而不会出现任何未暴露的阴影DOM树。这就是为什么标记实例没有机会成为指针事件的目标。
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.
为了澄清，可能有趣的是注意到这一点也是如此通过CSS规则对标记实例进行样式化，这是不可行的。只有原始的标记元素，即声明< marker> 元素，使用CSS是风格的，而通过属性 marker-start ， marker-mid 或 marker-end 不可访问，因此不能单独定制。
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选择器可以应用于原始（即引用）元素，因为它们是正式文档结构的一部分。 CSS2选择器不能应用于（概念上）克隆的DOM树，因为它的内容不是正式文档结构的一部分。
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.
这篇关于SVG中的路径标记端点击事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
