<hatchpath> - SVG: Scalable Vector Graphics

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The <hatchpath> SVG element defines a hatch path used by the <hatch> element.

Usage context

Categories	None
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements `<script>`, `<style>`

Attributes

Global attributes

Specific attributes

d
offset

DOM Interface

This element implements the SVGHatchpathElement 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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`hatchpath` ExperimentalNon-standard	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
`d` Non-standard	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
`offset` Non-standard	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.