Hover svg rect to show svg text - HTML CSS SVG

HTML CSS examples for SVG:Rectangle

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

Description

Hover svg rect to show svg text

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

svg text{<!--  w w w .  ja  v a  2 s  .c  o m-->
   visibility:hidden;
}
svg rect:hover + text{
   visibility:visible;
}


      </style> 
 </head> 
 <body> 
  <svg> 
   <rect x="10" y="10" width="100" height="100" /> 
   <text x="110" y="50" font-family="Verdana" font-size="55" fill="blue">
     Hello this is a test
   </text> 
  </svg>  
 </body>
</html>

Related Tutorials