How to create a staggered square tiling pattern in svg?-CodePudding

I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square.

How to use the pattern element in svg to achieve this?

Here is the diagram of the result I want

I tried to achieve this shift but it did not work.

<svg width=1000 height=1000>
  <pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
    <rect  x="0" width="100" height="100" y="0" fill="blue" />
    <rect  x="100" width="100" height="100" y="0" fill="yellow" />
    <rect  x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" />
    <rect  x="150" y="100" width="100" height="100" y="0" fill="green" />
  </pattern>
  <rect width="100%" height="100%" fill=url(#bar)>
</svg>

The difficulty is that each of my squares is an image and it cannot be split in half. So I can't find the smallest element of this pattern.

Thank you in advance.

CodePudding user response：

Something like this... You can replace the paths with images.

The trick is to draw one of the pieces in two separate halves allowing the pattern rect to clip each half.

<svg>
  <pattern id="p" patternUnits="userSpaceOnUse" width="80" height="80">
    <path transform="translate(8,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(48,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(28,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(68,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(-12,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
  </pattern>
  <rect width="200" height="200" fill="url(#p)"/>
</svg>