8行代码实现砖墙效果

效果图

代码

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" >
    <defs>
        <pattern id="pattern" width="2" height="2" patternUnits='userSpaceOnUse' patternTransform='scale(20)'>
            <path d="M 0 0 H 2 V 1 H 0 M 1 1 H 3 V 2 H 1 M 1 1 V 2 H -1 V 1 H 1 M 0 2 V 3 H 2 V 2 H 0 M 0 0 H 0 M 0 0 V 1" stroke-width="0.1" stroke="#333" fill="lightcoral"/>
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#pattern)" />
</svg>

在线演示

jsbin.com/dupugu/edit…

解释

svg pattern

定义在 pattern 里的元素，可以用来填充其他元素，就像背景颜色一样。这里我们在 pattern 里定义了一个形状，

<path d="M 0 0 H 2 V 1 H 0 M 1 1 H 3 V 2 H 1 M 1 1 V 2 H -1 V 1 H 1 M 0 2 V 3 H 2 V 2 H 0 M 0 0 H 0 M 0 0 V 1" stroke-width="0.1" stroke="#333" fill="lightcoral"/>

然后用定义好的 pattern 填充 rect 元素。

 <rect width="100%" height="100%" fill="url(#pattern)" />

形状的设计

用 pattern 填充元素时，是以矩形形状进行的。所以，我们在 pattern 里定义的形状，需要能够以矩形形状重复后，变成完整的砖墙效果。

工具：yqnn.github.io/svg-path-ed…

设计出来的形状长这样

由 4 个矩形组成

但是 pattern 重复的区域只有黄线画出来的部分，只有这个部分才符合要求