SVG <hatch> Element
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.
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:
.png)
