Simple fill pattern in svg : diagonal hatching

Question

How would I fill an SVG shape, not with a single colour, an image or a gradient, but with a hatching pattern, diagonal if possible.

It\'s been 2 hours and I\'ve foun

Answer 1

I've adapted Ingo's answer here.

This pattern includes two paths, one for the background, and other for the hatches. The background color is addressable vs JS such as:

const hatchPath = document.querySelector("path#hatches");

hatchPath.setAttribute('style', "stroke:blue; stroke-width:1")

The background path is overly-wide on purpose, so that there's no part of the pattern not at least covered by the background. Meanwhile, the hatches can have their width tuned to change how thick the lines are.