Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

SVG <hatch> Element

  • Last Updated : 15 Oct, 2020

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. 

The <hatch> SVG element is used to stroke an object. It uses one or more pre-defined paths to fill an object. It repeats the path after a fixed interval in a specified direction to cover the areas to be painted.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<hatch x="" y="" pitch="" rotate="" hatchUnits="" 
hatchContentUnits="" transform="" href="">

Attributes:



  • x – It defines the x-axis coordinate in the user coordinate system.
  • y – It defines the y-axis coordinate in the user coordinate system.
  • rotate – It specifies how the animated element rotates as it travels along a path specified in an <animateMotion> element.
  • transform – It defines the list of transform definitions that are applied to an element and the element’s children.
  • href – It defines the link to a resource as a reference URL.

Example 1:




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1100 400">
        <defs>
            <hatch id="hatch" 
                hatchUnits="userSpaceOnUse" 
                pitch="5" rotate="135">
  
                <hatchpath stroke="#a080ff" 
                    stroke-width="2" />
            </hatch>
        </defs>
  
        <foreignObject x="95" y="12" 
            width="160" height="160" 
            color="Green">
              
            <div>
                <br><br>GEEKSFORGEEKS<br><br>
            </div>
  
        </foreignObject>
        <rect fill="url(#hatch)" 
            stroke="Green" stroke-width="2" 
            x="5%" y="5%" width="20%" 
            height="20%" />
    </svg>
</body>
  
</html>

Output:

Example 2:




<!DOCTYPE html>
<html>
      
<body>
    <svg viewBox="0 0 1100 400">
        <defs>
            <hatch id="hatch" 
                hatchUnits="userSpaceOnUse" 
                pitch="9" rotate="135">
  
                <hatchpath stroke="Green" 
                    stroke-width="12" />
            </hatch>
        </defs>
  
        <foreignObject x="110" y="12" 
            width="160" height="160" 
            color="Green">
              
            <div>
                <br><br>GeeksForGeeks<br><br>
            </div>
  
        </foreignObject>
        <ellipse vfill="url(#hatch)" 
            fill="None" stroke="green" 
            stroke-width="2" cx="164" 
            cy="58" rx="100" ry="50"
            fill />
    </svg>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :