重叠 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 元素上没有设置，路径上设置为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>