SVG路径区域重叠

Question

我今天刚开始玩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>

Answer 1

您必须将所有路径放置在同一个SVG中，以便使悬停效果像您所希望的那样工作。这是由于SVG元素（而不是路径）相互重叠造成的，这与Z-indexes并不像您希望的那样工作

话虽如此，您不能很容易地定位 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;
}

演示

附注。我假设javascripg的onmouseover和onmouseout来自一次失败的尝试？