来自 Figma 的 SVG 元素在移动到 VSC 时无法正确对齐

Question

我最近开始使用 Figma 来设计网页。完成页面设计后，我导出所有 SVG 文件并将它们添加到我的 HTML 文档中。我去复制 Figma 的 CSS 样式，但是所有东西都超出尺寸导致一切都不合适。

我尝试用更大的 height/width 重新设计它，但还是出现了同样的问题。

我是否创建 Figma canvas 我的显示器分辨率大小？

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

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

不能post这里的其余代码，因为它超过了 3000 个字符的限制，这要归功于 SVG 的 1000+ 字符数之一。

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;


}

Answer 1

将 preserveAspectRatio="none" 添加到 svg

来自 Figma 的 SVG 元素在移动到 VSC 时无法正确对齐

SVG elements from Figma don't align correctly when moving them to VSC

html

css

svg

figma