SVG <hatchpath> Element

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>

Output:

Browser Compatibility: Currently, no browser supports this element but it can be supported in future versions of modern browsers.

Explore