Create SVG pattern - HTML CSS SVG

HTML CSS examples for SVG:Pattern

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

Description

Create SVG pattern

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--   ww w.j  a  va  2 s  .co m-->
 <body> 
  <div style="width: 1150px; height: 900px;"> 
   <svg width="1150" height="900"> 
    <defs> 
     <pattern id="line1" x="0" y="0" width="5" height="200" patternunits="userSpaceOnUse"> 
      <path fill="#ffffff" d="M 0 0 L 5 0 L 5 200 L 0 200 Z" /> 
      <path stroke-width="2" stroke="#000" d="M 0 0 L 5 0" /> 
      <path stroke-width="2" stroke="#000" d="M 5 0 L 5 200" /> 
     </pattern> 
    </defs> 
    <g id="holder1" transform="translate(4.5,50) matrix(1,2,0,1,0,0)"> 
     <rect x="0" y="0" width="75" height="200" fill="url(#line1)"></rect> 
    </g> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials