Блог

Главная - Вопросы по программированию - SVG-элементы из Figma неправильно выравниваются при перемещении их в VSC

SVG-элементы из Figma неправильно выравниваются при перемещении их в VSC

#html #css #svg #figma

#HTML #css #svg #figma

Вопрос:

Недавно я начал использовать Figma для разработки веб-страниц. После того, как я закончил разработку страницы, я экспортировал все SVG-файлы и добавил их в свой HTML-документ. Я попытался скопировать стиль CSS из Figma, но все было не по размеру, в результате чего все было не на своих местах.

Я попытался изменить его с большей высотой / шириной, но возникла та же проблема.

Должен ли я создавать Figma canvas размером с разрешение моего монитора?

codepen: https://codepen.io/HasanTheSyrian_/pen/BaKLrrO
Библиотека Figma: https://www.figma.com/file/DXbkUoTm9W1uCJpwipeVCQ/MyFormWebsite?node-id=16:0

(верхняя панель — это редизайн, предпринятый при попытке придать элементам SVG размер браузера, нижние панели — это первые панели, которые я посчитал подходящими)

Не удалось опубликовать остальной код здесь, потому что он превысил лимит в 3000 символов благодаря одному из более чем 1000 символов в SVG.

index.css

 body {
   
    font-family: 'Alata', sans-serif;
    background-color: #E5E5E5;

}

header {

    display: flex;

    position: absolute;
    width: 100%;
    height: 63px;
    left: 0px;
    top: 0px;
    
    background: #009ABC;
    box-shadow: 0px 4px 22px 4px rgba(0, 0, 0, 0.32);

}

.logo {
    
    width: 347px;
    height: 195px;
    left: -136px;
    top: -66px;
    position: absolute;

}

.upperTextContainer {

    position: absolute;
    width: 563px;
    height: 86px;
    left: 74px;
    top: 261px;    
    font-size: 62px;
    
    
    outline: none;
}

.lowerTextContainer {

    position: absolute;
    width: 780px;
    height: 82px;
    left: 74px;
    top: 359px;
    margin: 24px 0px 24px 0px;
    
    font-family: Alata;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 41px;
    
    color: #000000;
   
}

.coderIllustration {

    position: absolute;
    width: 594px;
    height: 451px;
    left: 170px;
    top: 509px;


}

.wave1 {
 
    position: absolute;
    width: 2191px;
    height: 854px;
    left: -34px;
    top: 106px;
    
    

} 

.wave2 {

    position: absolute;
    width: 2191px;
    height: 854px;
    left: -34px;
    top: 167px;
    
    

} 

.wave3 {

    position: absolute;
    width: 2191px;
    height: 854px;
    left: -34px;
    top: 247px;


}

Ответ №1:

добавить preserveAspectRatio="none" в svg