SVG <hatchpath> Element

Last Updated : 22 Aug, 2022

SVG stands for Scalable Vector Graphic. It is used to make graphics and animations which can be scaled to large screen sizes. The <hatchpath> element is defines a hatch path which is used by the<hatch> element. The <hatchpath> element is defined in the<hatch> element.

Prerequisites:

<hatch> element

Syntax:

<hatchpath stroke="" stroke-width=" "/>

Attributes:

d: The d attribute defines a path to be drawn
offset: The offset attribute is used to set the offset for the path.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 1100 400"> 
        <defs> 
            <hatch id="hatch"
                hatchUnits="userSpaceOnUse"
                pitch="5" rotate="135"> 
  
                <hatchpath stroke="blue"
                    stroke-width="15" /> 
            </hatch> 
        </defs> 
  
        <foreignObject x="100" y="12"
            width="160" height="160"
            color="Green"> 
              
            <div> 
                <br><br>GFG<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:

Example2:

HTML

<!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>GFG<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> 