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

Question

我想用重复的图像图案填充矩形空间。图像以交错的方形平铺方式排列。相邻的两行在 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>

困难在于我的每个方 block 都是一个图像并且不能将其分成两半。所以我找不到这个模式的最小元素。

提前谢谢您。

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>