如何在 svg 中创建交错的方形平铺图案？

Question

我想用重复的图像图案填充矩形 space。图像排列成交错的正方形平铺。相邻两行在 x 方向上错开正方形边宽的一半。

如何使用svg中的pattern元素来实现？

Here is the diagram of the result I want

我试图实现这种转变，但没有奏效。

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

难点在于我的每一个方块都是一张图片，不能一分为二。所以我找不到这个图案的最小元素。

提前谢谢你。

Answer 1

类似这样...您可以用图片替换路径。

诀窍是将其中一件画成两半，让图案矩形剪裁每一半。

<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>

如何在 svg 中创建交错的方形平铺图案？

How to create a staggered square tiling pattern in svg?

html

javascript

svg

d3.js

svg-pattern