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.
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.
Contact Us