将Figma中的SVG元素移动到VSC时无法正确对齐

问题描述

我最近开始使用Figma设计网页。设计完页面后，我导出了所有SVG文件并将其添加到HTML文档中。我去了Figma的CSS样式，但是一切都超出了尺寸，导致一切都错了。

我尝试以更大的高度/宽度重新设计它，但是发生了同样的问题。

我是否创建与显示器分辨率相同大小的Figma画布？

codepen：https://codepen.io/HasanTheSyrian_/pen/BaKLrrO
Figma库：https://www.figma.com/file/DXbkUoTm9W1uCJpwipeVCQ/MyFormWebsite?node-id=16%3A0

（上面板是重新设计的尝试，试图使SVG元素的大小与浏览器的大小相同，下面板是我认为合适的第一面板）

由于SVG的1000多个字符数之一，超出了3000个字符的限制，因此无法在此处发布其余代码。

---

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


}

解决方法

将preserveAspectRatio="none"添加到svg