Повторение встроенного шаблона SVG - PullRequest
Новая
       10

Повторение встроенного шаблона SVG

1 голос
/ 01 июля 2019

Как это сделать?

Код:

https://jsfiddle.net/p1rwuzf8/1/

Этот шаблон 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>

1 Ответ

1 голос
/ 02 июля 2019

Один из способов сделать это - использовать изображение в качестве фонового изображения.Для этого вам необходимо сначала кодировать изображение 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>
...