Question

这是怎么做的？

代码：

此模式在重复时为svg。

https://i.imgur.com/sTACtMT.png

应该看起来像这样。

https://i.imgur.com/E68BQFo.png

svg {
  background-repeat: repeat;
}

<svg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>

Answer 1

执行此操作的一种方法是将图像用作背景图像。为此，您首先需要对svg图像进行编码，例如使用以下工具：SVG encoder

div{width:200px;
  height:300px;
  border:1px solid;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

<div></div>

另一种实现方法是使用SVG模式。为此，您需要使用用于绘制“砖”的组，并以如下方式使用它：

<svg width="200" height="300" viewBox="0 0 200 300">
  <defs>
    <pattern id="brick"  width='42' height='44' patternUnits='userSpaceOnUse'> >
      <g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#brick)"></rect>
</svg>

重复内嵌svg模式

1 个答案: