W3cubDocs

<hatch>

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

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of '<hatch>' in that specification.	Candidate Recommendation	Initial definition

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	No	No	No	No	No	?
`hatchContentUnits`	?	?	?	?	?	?
`hatchUnits`	?	?	?	?	?	?
`href`	?	?	?	?	?	?
`pitch`	?	?	?	?	?	?
`rotate`	?	?	?	?	?	?
`transform`	?	?	?	?	?	?
`x`	?	?	?	?	?	?
`y`	?	?	?	?	?	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	?	No	No	No	No	?	?
`hatchContentUnits`	?	?	?	?	?	?	?
`hatchUnits`	?	?	?	?	?	?	?
`href`	?	?	?	?	?	?	?
`pitch`	?	?	?	?	?	?	?
`rotate`	?	?	?	?	?	?	?
`transform`	?	?	?	?	?	?	?
`x`	?	?	?	?	?	?	?
`y`	?	?	?	?	?	?	?