html - 3 svg 图像相互重叠

Question

我有 3 个必须构成背景的 SVG 图像，这是一个屏幕截图:

我已经从 Figma 中导出了所有参数:宽度、高度、 View 框、路径本身:

<svg width="487" height="849" viewBox="0 0 487 849">
  <defs>
    <pattern id="pattern" height="100%" width="100%">
      <image className="introImage" href={photos.blueLakes.background1} />
    </pattern>
  </defs>
  <path d="M323.138 0L0 130.089V848.497L487 763.022L385.264 458.647L487 130.089L323.138 0Z" fill="url(#pattern)" />
</svg>

<svg width="567" height="806" viewBox="0 0 567 806">
  <defs>
    <pattern id="pattern" patternUnits="userSpaceOnUse" height="100%" width="100%">
      <image className="introImage" href={photos.blueLakes.background2} />
    </pattern>
  </defs>
  <path d="M347.083 0.5L20.8333 40.0833L101.667 104.25L0 432.583L101.667 736.75L474.583 805.5L566.25 321.333L347.083 0.5Z" fill="url(#pattern)" />
</svg>

<svg width="861" height="869" viewBox="0 0 869 861">
  <defs>
    <pattern id="pattern" patternUnits="userSpaceOnUse" height="100%" width="100%">
      <image className="introImage" href={photos.blueLakes.background3} />
    </pattern>
  </defs>
  <path d="M535.551 84.258L0.5 0.5L219.688 321.364L128.012 805.577L300.112 784.742L868.5 860.999V124.262L766.407 136.763L535.551 84.258Z" fill="url(#pattern)" />
</svg>

但我只有 3 个小的 SVG，我认为它们相互重叠，看起来像这样:

我不知道如何修复它，因为在 Figma 中它看起来不错，但是当我将这些参数复制到 HTML 时它不起作用。也许您有解决此问题的建议？
编辑:窗口宽度为 1600px，窗口高度为 900px

Answer 1

您可以使用 CSS 和剪辑路径构建它。维护起来会更容易:

.box {
  height: 400px;
  background: url(https://picsum.photos/id/1023/800/300) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 34% 11%, 57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 38% 88%, 0 97%);
  position: relative;
  z-index: 0;
  font-size: 60px;
  line-height: 400px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box::before {
  background: url(https://picsum.photos/id/12/800/300) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 40% 15%, 35% 50%, 38% 88%, 0 97%);
}

.box::after {
  background: url(https://picsum.photos/id/125/800/300) center/cover;
  clip-path: polygon(57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 63% 50%);
}

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

您可以在此处轻松构建多边形: https://bennettfeely.com/clippy/
使用 CSS 变量轻松调整图像:

.box {
  height: 400px;
  background:var(--img1) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 34% 11%, 57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 38% 88%, 0 97%);
  position: relative;
  z-index: 0;
  font-size: 60px;
  line-height: 400px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box::before {
  background: var(--img2) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 40% 15%, 35% 50%, 38% 88%, 0 97%);
}

.box::after {
  background: var(--img3) center/cover;
  clip-path: polygon(57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 63% 50%);
}

<div class="box" 
 style="--img1:url(https://picsum.photos/id/1023/800/300);
        --img2:url(https://picsum.photos/id/12/800/300);
        --img3:url(https://picsum.photos/id/125/800/300);">
  Blue Lakes
</div>