3 張 svg 圖像相互重疊

Question

我有 3 個必須構成背景的 SVG 圖像，這是一個屏幕截圖：

我已經從 Figma 導出了所有參數：寬度、高度、視圖框、路徑本身：

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

Answer 2

我會將您的 svg 元素轉換為符號並將它們全部放入一個公共 svg 中，如下所示：

 <svg viewBox="0 0 1601.5 887"> <symbol id="a" viewBox="0 0 487 849"> <path d="M323.138 0L0 130.089V848.497L487 763.022L385.264 458.647L487 130.089L323.138 0Z" /> </symbol> <symbol id="b" viewBox="0 0 567 806"> <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" /> </symbol> <symbol id="c" viewBox="0 0 869 861"> <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" /> </symbol> <g id="g"> <use xlink:href="#a" x="0" y="0" width="487" height="849" /> <use xlink:href="#b" x="386" y="26" width="567" height="806" /> <use xlink:href="#c" x="733" y="26" width="869" height="861" /> </g> </svg>