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指数不像你想要的那样工作

话虽如此，你不能轻易定位<path>，所以我使用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

P.S。我假设javascripg onmouseover和onmouseout来自失败的尝试？

SVG路径区域重叠

1 个答案: