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.
Usage context
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> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGHatchElement
interface.
Example
SVG
<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>
Result
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hatch | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
hatchContentUnits | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
hatchUnits | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
href | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
pitch | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
rotate | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
transform | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
x | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
y | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
Legend
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.