Добрый вечер. У меня есть три файла SVG, состоящие из 2 рукавов и рубашки.
Схема рубашки с CSS -Сетка
Желаемый результат
Для попытки CSS -Grid каждый файл SVG помещается в элемент div, второе изображение показывает HTML, размещенный ниже. Проблема в том, что элементы смещаются друг от друга с растущими размерами экрана или смещаются слишком близко друг к другу и в конечном итоге перекрываются. вот так Я пытался использовать CSS Grid для позиционирования элементов, что сработало хорошо, но не решает мою проблему, так как я не могу установить отрицательные промежутки или поля для сетки. Я пытался работать с%, а также с vw и vh, абсолютным и относительным позиционированием, но пока не могу заставить его работать с каждым разрешением.
.containerShirt {
background-color: white;
width: 100vw;
height: 400px;
position: relative;
border: 1px solid black;
}
.shirtLeft {
position: relative;
height: 13%;
left: 26.9%;
bottom: 15vh;
/* border: 1px solid black; */
z-index: 2;
/* border: 1px solid black; */
}
.shirtBody {
position: relative;
height: 40%;
width: 35%;
left: 13%;
/* border: 1px solid black; */
z-index: 1;
/* border: 1px solid black; */
}
.shirtRight {
position: relative;
bottom: 24%;
height: 13%;
right: 1%;
bottom: 15vh;
/* border: 1px solid black; */
z-index: 1;
/* border: 1px solid black; */
}
<div class="containerShirt">
<svg class="shirtLeft"> ..... </svg>
<svg class="shirtBody"> ..... </svg>
<svg class="shirtRight">..... </svg>
</div>
Есть идеи о том, что я могу сделать? Большое спасибо.