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

Posted 2023-02-23

【中文标题】重叠 SVG 元素的鼠标处理未按预期工作

【英文标题】：Mouse handling for overlapping SVG elements not working as expected

【发布时间】：2014-09-22 16:41:43

【问题描述】：

我有几个 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"  >
  <path fill="none" stroke="#ff0000" stroke- 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"  >
  <path fill="none" stroke="#880000" stroke- 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"  >
  <path fill="none" stroke="#00ff00" stroke- pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

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

JSFiddle

这是一个jsfiddle，显示了这两种情况。红线位于单独的 svg 元素中，绿线位于单个 svg 元素中。绿线按我的预期工作。红线没有。

注意事项

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

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

李>

问题

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

【问题讨论】：

这并不能真正回答您的问题，但真的有必要将它们放在单独的 svg 元素中吗？我建议使用 transform="translate(x, y)" 替换 CSS left 和 top，并将它们放在一个 pointer-events，如果可能的话，因为这在你的 jsfiddle。

@Oscar 我可能最终会这样做，但是，在我们使用 jsplumb 作为连接线的一些类似代码中的鼠标处理与单独的 svg 元素中的路径正常工作。我模仿了从 jsplumb svg & path 元素中可以看到的所有内容，但它的行为方式仍然不同。我必须知道为什么！ :-)

我理解这种挫败感；）很高兴看到解决方案已经找到。

【参考方案1】：

使用正确的语法（您使用的是：而不是 =）将 pointer-events="none" 添加到顶部的 svg 似乎至少在 Firefox 上对我有用。就这样……

<svg class="connector" style="position:absolute;left:277.5px;top:65px"  >
  <path fill="none" stroke="#ff0000" stroke- 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"  >
  <path fill="none" stroke="#880000" stroke- 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"  >
  <path fill="none" stroke="#00ff00" stroke- pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

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

【讨论】：

天哪！感谢您发现这一点！它现在在我的实际应用中正常工作。

你知道你的问题不是“X”，所以你不再看“X”，但你的问题实际上是“X”。是的……那个。 :-|