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>


Global attributes

Specific attributes

DOM Interface

This element implements the SVGHatchpathElement interface.



<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5"
      <hatchpath stroke="#a080ff" stroke-width="2"/>

  <rect fill="url(#hatch)" stroke="black" stroke-width="2"
     x="10%" y="10%" width="80%" height="80%" />



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

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support[1] No support[2] No support[3] No support No support[1] ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ?[1] No support[3] No support No support ?

[1] Blink does not yet implement this feature. See Chromium bug 367762.

[2] EdgeHTML does not yet implement this feature. See Edge bug 9107381.

[3] Gecko does not yet implement this feature. See bug 1239147.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.