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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: