我想用重复的图像模式填充矩形空间.图像以交错的方形平铺方式排列.两个相邻的行在x方向上错开正方形边宽度的一半.
如何使用svg中的模式元素来实现这一点？
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>困难在于，我的每个方块都是一个图像，不能一分为二.所以我找不到这个模式的最小元素.
提前谢谢你.