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>
Desktop | ||||||
---|---|---|---|---|---|---|
hatch
|
No | No | No | No | No | ? |
hatchContentUnits
|
No | No | No | No | No | ? |
hatchUnits
|
No | No | No | No | No | ? |
href
|
No | No | No | No | No | ? |
pitch
|
No | No | No | No | No | ? |
rotate
|
No | No | No | No | No | ? |
transform
|
No | No | No | No | No | ? |
x
|
No | No | No | No | No | ? |
y
|
No | No | No | No | No | ? |
Mobile | ||||||
---|---|---|---|---|---|---|
hatch
|
No | No | No | No | ? | No |
hatchContentUnits
|
No | No | No | No | ? | No |
hatchUnits
|
No | No | No | No | ? | No |
href
|
No | No | No | No | ? | No |
pitch
|
No | No | No | No | ? | No |
rotate
|
No | No | No | No | ? | No |
transform
|
No | No | No | No | ? | No |
x
|
No | No | No | No | ? | No |
y
|
No | No | No | No | ? | No |
© 2005–2020 Mozilla 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