Simple fill pattern in svg : diagonal hatching

by

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)"/>

More Related Contents:

  1. How to calculate the SVG Path for an arc (of a circle)
  2. How to convert a PNG image to a SVG? [closed]
  3. Removing transforms in SVG files
  4. How to use the viewBox attribute?
  5. How to set transform origin in SVG
  6. Remove the host HTML element selectors created by angular component
  7. How many levels of recursion does SVG support?
  8. Add custom icons to font awesome
  9. Catmull-Rom interpolation on SVG Paths
  10. Find svg viewbox that trim whitespace around
  11. Default background color of SVG root element
  12. Scale and mirror SVG object
  13. How to convert a SVG to a PNG with ImageMagick?
  14. vertical alignment of text element in SVG
  15. SVG shadow cut off
  16. Crop to fit an svg pattern
  17. How to place multiple evenly-spaced arrowheads along an SVG line?
  18. SVG Positioning
  19. svg multiple color on circle stroke
  20. How can I cut one shape inside another?
  21. SVG angular gradient
  22. Can I apply a gradient along an SVG path?
  23. Adding feDropShadow to a vertical line in SVG makes it disappear
  24. Add text/label onto links in D3 force directed graph
  25. SVG Image in JavaFX 2.2
  26. Converting an svg arc to lines
  27. Pure SVG way to fit text to a box
  28. SVG images blocked by gmail proxy
  29. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  30. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

Leave a Comment