Handle Mouse Events while overlapping SVG lines - HTML CSS SVG

HTML CSS examples for SVG:Line

  1. HOME
  2. HTML CSS
  3. SVG
  4. Line

Description

Handle Mouse Events while overlapping SVG lines

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <h1>My first SVG</h1> 
  <svg> 
   <svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:2;"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="console.log('yellow clicked')" /> Sorry, your browser does not support inline SVG. 
   </svg> <!--   ww w.j a v a2s  .  c om-->
   <svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:1;"> 
    <circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="brown" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="console.log('red clicked')" /> Sorry, your browser does not support inline SVG. 
   </svg> 
  </svg>  
 </body>
</html>

Related Tutorials