html - 在更大的容器上水平重复 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

在您的代码中，模式的宽度为 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>

Answer 2

使用 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>