Use Nest text inside SVG path - HTML CSS SVG

HTML CSS examples for SVG:Text

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

Description

Use Nest text inside SVG path

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{<!-- ww  w. ja  v a2  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 
   </text> 
  </svg>  
 </body>
</html>

Related Tutorials