Home/ Questions/Q 9185765
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:21:27+00:00

How would I fill an SVG shape, not with a single colour, an image

  • 0

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 found nothing (at least after 2005).

I figure a possible hack would be a hatched PNG that would serve as fill, but that is not ideal.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I did not find anything for diagonal hatching on the internet either, so I’ll share my solution here:

    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
  <path d="M-1,1 l2,-2
           M0,4 l4,-4
           M3,5 l2,-2" 
        style="stroke:black; stroke-width:1" />
</pattern>

    (note the lower case "l" in the path expression)

    The above creates a hatch with diagonal lines from the lower left to the upper right that are 4 pixels apart. Besides the diagonal line (M0,4 l4,-4) you also have to stroke the upper left and the lower right edges of the pattern area, since the line will otherwise be "constricted" due to clipping where it intersects the edges of the square.

    Example of a pattern after applying the above steps, it shows how the pattern it titled to make the end product

    To fill a rectangle with this pattern, do:

    <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
    • 0