3 изображения SVG перекрывают друг друга

Question

У меня есть 3 изображения SVG, которые должны составлять фон, вот скриншот:

Я экспортировал все параметры из Figma: ширина, высота, viewbox, сам путь:

svg #1

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

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

<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, это не работает. Может у вас есть предложения по устранению этой проблемы?

Edit: ширина окна составляет 1600 пикселей, высота окна - 900 пикселей

_{Свободный перевод вопроса 3 svg images overlap each other от участника @Michael Shkarubski.}

Answer 1

Вы можете создать это, используя CSS и clip-path. Это было бы проще поддерживать:

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

Вы можете легко построить многоугольник здесь:

Использование переменных 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>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

3 изображения SVG перекрывают друг друга

Ответы (1 шт):