SVG 路径区域重叠

Question

我今天刚开始使用 SVG，但我不知道如何在没有悬停区域重叠问题的情况下使用非矩形形状进行悬停，正如您在 my fiddle 中看到的那样。

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

<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 不能像您希望的那样工作

话虽如此，你不能很容易地定位<path>s，所以我使用this tool 来应用你拥有的样式。或者，您可以将它们放在单独的 <g> 元素中并以这种方式定位它们

要注意的另一件事是您应该将: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;
}

Demo

附：我假设 javascripg onmouseovers 和 onmouseouts 来自失败的尝试？