SVG路径区域重叠

我今天刚开始使用SVG，我不知道如何在没有悬停区域重叠问题的情况下使用非矩形形状进行悬停，如中所示

如果有人能指出我所缺少的知识，我将不胜感激

<svg height="444" width="257" class="svg svg1">
  <path d="M0 148 L257 0 L257 297 L0 444 Z" style="fill:lime;stroke:none;"  
      onmouseover="document.getElementById('fade1').style.opacity = '.9';" 
      onmouseout="document.getElementById('fade1').style.opacity = '0';"/>
</svg>  
<svg height="444" width="257" class="svg svg2">
  <path d="M0 148 L257 0 L257 297 L0 444 Z" style="fill:lime;stroke:none;"  
      onmouseover="document.getElementById('fade2').style.opacity = '.9';" 
      onmouseout="document.getElementById('fade2').style.opacity = '0';"/>
</svg>  
<svg height="444" width="257" class="svg svg3">
  <path d="M0 148 L257 0 L257 297 L0 444 Z" style="fill:lime;stroke:none;"  
      onmouseover="document.getElementById('fade3').style.opacity = '.9';" 
      onmouseout="document.getElementById('fade3').style.opacity = '0';"/>
</svg>

---

您必须将所有路径放在同一个SVG中，才能使悬停效果如您所愿工作。这是由于SVG元素（而不是路径）彼此重叠，这与Z索引的工作方式不同

话虽如此，您不能很容易地定位

s，因此我使用了您使用的样式。或者，您可以将它们放在单独的

元素中，并以这种方式定位它们

另一件需要注意的事情是，应该将

：hover

效果应用于路径，而不是SVG元素

/* SVG */
<svg height="1150" width="257">
    <path d="M0 244L257 96L257 393L0 540z" style="fill:lime;stroke:none;"/>
    <path d="M0 545L257 397L257 694L0 841z" style="fill:lime;stroke:none;"/>
    <path d="M0 846L257 698L257 995L0 1142z" style="fill:lime;stroke:none;"/>
</svg>

/* CSS */
svg {
    margin:0 auto;
    display:block;
    width:257px;
}
svg path {
    opacity:.3;
}
svg path:hover {
    opacity:1;
}

/*SVG*/
/*CSS*/
svg{
保证金：0自动；
显示：块；
宽度：257px；
}
svg路径{
不透明度：.3；
}
svg路径：悬停{
不透明度：1；
}

---

另外，我假设javascripg

onmouseover

S和

onmouseout

S来自失败的尝试？

当我在相应的路径上悬停时，我使用onmouseover和onmouseouts来改变图像的不透明度。我会试试你告诉我的，然后告诉你结果如何。非常感谢。@user3372093如果您发现一个问题符合您的问题，您可以通过单击问题旁边的复选标记将其标记为正确，这将为您提供答案er和OP（原始海报-您）做soYey的声誉！！成功了。如果你愿意，你可以查看结果@用户3372093我喜欢它！你可以尝试延迟过渡，这样图像可以看得更清楚一点，但这只是一个想法，或者只是淡出它，而不是跳跃