javascript - 重叠 SVG 元素的鼠标处理未按预期工作

Question

我有几个 SVG 路径元素，每个元素都在父 svg 元素内，如下所示:

<svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>

<svg style="position:absolute;left:277.5px;top:109px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="108.5px" width="410.015625px">
  <path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>

svg 元素(以及它们的子路径)在视觉上是重叠的。

我想有悬停效果，所以我在每个路径上设置了 mouseenter 和 mouseleave 事件。

当鼠标悬停在不重叠的区域上方时，悬停会按预期工作，但是，当鼠标悬停在 svg 元素的边界矩形重叠的区域上方时，不会触发鼠标事件正确。

但是，如果我将相同的两个路径元素放入单个 svg 中，如下所示，则鼠标悬停会按预期工作，即使边界矩形重叠。

<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

  <path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>
</svg>

JSFiddle

这是一个jsfiddle显示这两种情况。红线位于单独的 svg 元素中，绿线位于单个 svg 元素中。绿线如我所料。红线没有。

注意事项

• 路径看起来不同只是因为在第一个示例中两个 SVG 元素具有不同的“top”属性。

• 一些类似的问题提到需要设置指针事件，但我认为我已经正确设置了这些事件(在 svg 元素上设置为 none，在路径上设置为 visibleStroke)。

  <

问题

如何使第一种情况下的鼠标句柄具有两个 svg 元素，其行为方式与第二种情况下具有单个 svg 元素的行为相同？

Answer 1

使用正确的语法(您使用的是 : 而不是 =)将 pointer-events="none"添加到顶部的 svg 似乎至少在 Firefox 上对我有用。像这样...

<svg class="connector" style="position:absolute;left:277.5px;top:65px" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>

<svg style="position:absolute;left:277.5px;top:109px;" pointer-events="none" height="108.5px" width="410.015625px">
  <path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>

<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

  <path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>