我有几个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
这是两种情况的图解。红线位于单独的svg元素中，绿线位于单个svg元素中。绿线和我预期的一样。而红线则没有。
指出路径看起来不同只是因为在第一个例子中两个SVG元素有不同的"top"属性。
一些类似的问题提到需要设置指针事件，但我认为我已经正确地设置了这些(在svg元素上无，并在路径上可见stroke)。
我如何使鼠标句柄的第一种情况下，两个svg元素，行为方式相同的第二个情况下，一个单一的svg元素?
使用正确的语法(您使用的是:而不是=)将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>