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元素具有不同的“顶部”属性。
一些类似的问题提到了设置指针事件的必要性，但我认为我已经正确设置了这些设置（在svg元素上为none，在路径上为visibleStroke）。

问题

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

Answer 1

添加指针事件=＆＃34;无＆＃34;使用正确的语法（你使用a：而不是=）到顶部的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>

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

的jsfiddle

备注

问题

1 个答案: