Limit or clip text in SVG - HTML CSS SVG

HTML CSS examples for SVG:Text

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

Description

Limit or clip text in SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <svg> 
   <text x="100" y="100">
     Orange <!--   www.  jav  a 2  s .  c o m-->
   </text> 
   <text x="100" y="115">
     Pear 
   </text> 
   <text x="100" y="130">
     Banana 
   </text> 
   <text x="100" y="145">
     Pomegranate 
   </text> 
   <rect x="155" y="85" width="100" height="100" fill="white" /> 
   <line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)" /> 
   <text x="160" y="100">
     12 
   </text> 
   <text x="160" y="115">
     7 test
   </text> 
   <text x="160" y="130">
     9 test
   </text> 
   <text x="160" y="145">
     2 
   </text> 
  </svg>  
 </body>
</html>

Related Tutorials