<hatch>
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
Experimental: 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
BCD tables only load in the browser