This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The <hatch> SVG element is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted.
Hatches defined by the <hatch> element can then referenced by the fill and stroke CSS properties on a given graphics element to indicate that the given element shall be filled or stroked with the hatch. Paths are defined by <hatchpath> elements.
| Categories | Never-rendered element, Paint server element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements <hatchpath>, <script>, <style>
|
This element implements the SVGHatchElement interface.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5"
rotate="135">
<hatchpath stroke="#a080ff" stroke-width="2"/>
</hatch>
</defs>
<rect fill="url(#hatch)" stroke="black" stroke-width="2"
x="10%" y="10%" width="80%" height="80%" />
</svg> | Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of '<hatch>' in that specification. | Candidate Recommendation | Initial definition |
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | No support[1] | No support[2] | No support[3] | No support | No support[1] | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ?[1] | No support[3] | No support | No support | ? |
[1] Blink does not yet implement this feature. See Chromium bug 367762.
[2] EdgeHTML does not yet implement this feature. See Edge bug 9107381.
[3] Gecko does not yet implement this feature. See bug 1239147.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/hatch