•  19-10-2022
  •  | 
  •  

Question

I just started playing with SVG today and I can't figure out how to do hovering with non-rectangular shapes without having hover area overlap issues, as you can see in my fiddle.

If anyone could point out my missing knowledge I would really appreciate it. 

<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>
Was it helpful?

Solution

You have to place all of the paths in the same SVG in order to have the hover effects work like you desire. This is due to the SVG elements (not the paths) overlapping each other, which with Z-indexes doesn't work like you want it to

With that being said, you can't position <path>s very easily, so I used this tool to apply the styles you had. Alternatively you could put them in individual <g> elements and position them that way

The other thing to note is you should apply the :hover effects to the paths, not the SVG element

/* 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. I'm assuming the javascripg onmouseovers and onmouseouts are from a failed attempt?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top