SVG <hatch> Element
Last Updated :
31 Mar, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...