Повторить шаблон SVG по горизонтали на большом контейнере

Question

Мне нужно повторить svg <pattern> по горизонтали <rect>.

Я имею в виду, svg <rect> больше шаблона, поэтому мне нужно, чтобы он повторялся по горизонтали на любом оставшемся пространстве.

Я хочу, чтобы основной узор появился в центре, что и происходит сейчас. Мне просто нужно, чтобы это повторялось с обеих сторон.

Прямо сейчас я могу показать его только один раз.

Примечание:

• Шаблон представляет собой черный треугольник
• Граница 1px dotted red взята из элемента svg

.mySvg {
  width: 600px;
  height: 50px;
  border: 1px dotted red;
}

<svg class="mySvg">
  <defs>
    <pattern id="wave" viewBox="0,0,150,50" width="100%" height="100%">
      <path d="M 0 50 l 75 -50 l 75 50" stroke="black" stroke-width="2"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
</svg>

Как сделать так, чтобы узор повторялся на оставшемся пространстве?

Answer 1

Использовать SVG в качестве фона:

.box {
  height:50px;
  border:1px solid red;
  margin: 5px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 -2 150 52"><path d="M 0 50 l 75 -50 l 75 50" stroke="black" /></svg>') 
    center/auto 100%;
}

<div class="box"></div>

<div class="box" style="height:100px;"></div>

Answer 2

В вашем коде шаблон имеет ширину 100%. Это не может повториться. Я дал узору ширину 25%. Также, чтобы он упал посередине, я смещаю узор на 12,5% (25/2) x = "12,5%"

.mySvg {
  width: 600px;
  height: 50px;
  border: 1px dotted red;
}

<svg class="mySvg" viewBox="0 0 600 50">
  <defs>
    <pattern id="wave" x="12.5%" y="0" width="25%" height="100%">
      <path d="M 0 50 l 75 -50 l 75 50" stroke="black" stroke-width="2"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
</svg>