dom – Click事件在SVG中路径的mark-end上不起作用

我在SVG中创建一个简单路径,并使用mark-end属性创建箭头线.然后我将click事件绑定到路径.

我发现单击标记区域时未触发click事件.如何解决这个问题?

解决方法

根据规范,这应该被认为是给定的.

07000

[…]

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树.这就是为什么标记实例不可能成为指针事件的目标的原因.

为了澄清,可能有趣的是,在通过CSS规则设置标记实例时也是如此,这是不可行的.只有原始标记元素,即声明<标记>元素,可以使用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.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...