html - 在较大的容器上水平重复 SVG 图案

Question

我需要重复 svg <pattern>在水平方向 <rect> .

我的意思是，svg <rect>比图案大，所以我需要它在剩下的任何空间上水平重复。

我希望主要图案出现在中心，这正是现在正在发生的事情。我只需要让它在两边都重复。

现在，我只能让它显示一次。

注意:

• 图案是黑色三 Angular 形
• 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>