W3cubDocs

/SVG

<hatchpath>

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

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
hatchpath No No No No No ?
d No No No No No ?
offset No No No No No ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
hatchpath No No No No ? No
d No No No No ? No
offset No No No No ? No

See also

© 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/hatchpath