highlight inner SVG elements of a group ( g ) - HTML CSS SVG

HTML CSS examples for SVG:Group

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

Description

highlight inner SVG elements of a group ( g )

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!-- w ww .j  a  va2s .c om-->
 <body> 
  <svg> 
   <style type="text/css">

g:hover rect:first-child {
   fill:red; stroke:blue;
}
g:hover rect {
   fill:green;
}
rect {
   stroke: green;
   stroke-width: 2;
   fill: yellow;
}
         </style> 
   <g> 
    <rect x="0" y="0" rx="5" width="100" height="60" /> 
    <rect x="20" y="20" rx="5" width="10" height="10" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials