У меня есть 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.