Drawing multiple SVG lines side by side - HTML CSS SVG

HTML CSS examples for SVG:Line

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

Description

Drawing multiple SVG lines side by side

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from   ww  w  . j  av a2 s.  co  m-->
 <body> 
  <svg width="150" height="250"> 
   <rect width="50" height="100" x="0" y="0" fill="red" /> 
   <rect width="50" height="100" x="50" y="0" fill="blue" /> 
  </svg> 
  <svg width="100" height="250"> 
   <line x1="25" y1="100" x2="25" y2="0" stroke="red" stroke-width="50"></line> 
   <line x1="75" y1="100" x2="75" y2="0" stroke="blue" stroke-width="50"></line> 
  </svg>  
 </body>
</html>

Related Tutorials