SVG (?) 导致白色 space

Question

首先，我使用的是 SVG，这已经有点困难了，我根本无法让背景图像工作，无论是通过 CSS 还是 img src标签。

一个已知的 SVG 技巧是 padding-bottom hack 但我对它们还不够熟悉。这是 SVG 似乎工作的唯一方式，通过在 Adobe Illustrator 上复制形状，然后 CTRL + V 在 Visual Studio 代码上。我怎样才能摆脱下面所有额外的 space ？

<div class="navbar">
    <div class="svg-wrap">
        <svg class="svg-item" width="auto" height="100">
            <rect x="20" width="20" height="400" fill="white" />
            <rect x="60" width="20" height="400" fill="white" />
            <rect x="100" width="20" height="400" fill="white" />
        </svg>
    </div>
        <ul class="nav-items">
            <li class="nav-link"><a href="#">home</a></li>
            <li class="nav-link"><a href="#">about</a></li>
            <li class="nav-link"><a href="#">contact</a></li>
            <li class="nav-link"><a href="#">portfolio</a></li>
        </ul>
    </div>

此代码块包含导航栏部分以及左角附近的三个矩形

    <div class="svg-wrap">
        <svg width="100%" height="100%" viewBox="100 0 600 1200">
            <style type="text/css">
                .st0{fill:none;stroke:#FFFFFF;stroke-width:1;stroke-miterlimit:10;}
            </style>
            <path class="st0" d="M0,1c118.8,0,118.8,20,237.6,20C356.4,21,356.4,1,475.2,1C594,1,594,21,712.8,21C831.6,21,831.6,1,950.4,1
                        s118.8,20,237.6,20"/>
        </svg>
    </div>

下一批是导航栏下方的波浪路径

    <svg class="left-svg" x="0px" y="0px" width="99.7px" height="792.7px"
    viewBox="10 12 99.7 792.7" style="enable-background:new 0 0 99.7 792.7;">
    <style type="text/css">
        .st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
    </style>
    <line class="st0" x1="99.4" y1="0.4" x2="0.4" y2="99.4"/>
    <line class="st0" x1="99.4" y1="99.4" x2="0.4" y2="198.4"/>
    <line class="st0" x1="99.4" y1="198.4" x2="0.4" y2="297.4"/>
    <line class="st0" x1="99.4" y1="297.4" x2="0.4" y2="396.4"/>
    <line class="st0" x1="99.4" y1="396.4" x2="0.4" y2="495.4"/>
    <line class="st0" x1="99.4" y1="495.4" x2="0.4" y2="594.4"/>
    <line class="st0" x1="99.4" y1="594.4" x2="0.4" y2="693.4"/>
    <line class="st0" x1="99.4" y1="693.4" x2="0.4" y2="792.4"/>
</svg>

这是页面的左侧

<svg class="right-svg" x="0px" y="0px" width="99.7px" height="792.7px"
viewBox="12 12 99.7 792.7" style="enable-background:new 0 0 99.7 792.7;">
    <style type="text/css">
        .st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
    </style>
    <line class="st0" x1="0.4" y1="0.4" x2="99.4" y2="99.4"/>
    <line class="st0" x1="0.4" y1="99.4" x2="99.4" y2="198.4"/>
    <line class="st0" x1="0.4" y1="198.4" x2="99.4" y2="297.4"/>
    <line class="st0" x1="0.4" y1="297.4" x2="99.4" y2="396.4"/>
    <line class="st0" x1="0.4" y1="396.4" x2="99.4" y2="495.4"/>
    <line class="st0" x1="0.4" y1="495.4" x2="99.4" y2="594.4"/>
    <line class="st0" x1="0.4" y1="594.4" x2="99.4" y2="693.4"/>
    <line class="st0" x1="0.4" y1="693.4" x2="99.4" y2="792.4"/>
</svg>

最后上面的代码是页面的右侧。

CSS:

.navbar {
    height: 80px;
    max-width: 100%;
    background-color: black;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}

.nav-items {
    display: flex;
    z-index: 2;
}

.svg-wrap {
    position: absolute;
    z-index: 1;
}

.svg-item {
    padding: 16px;
    position: relative;
    left: 5px;
}

.left-svg {
    position: relative;
    top: 45px;
    padding-bottom: 120px;
}

.right-svg {
    position: relative;
    top: 45px;
    float: right;
    padding-bottom: 120px;
}

我真的希望有一种 cleaner/shorter 的方式来向你们展示我的代码，但是一些 SVG 代码围绕着其他 HTML 内容，因此变得非常冗长乏味。我也知道粘贴 CSS 只会让事情变得更糟！！希望我没有违反任何垃圾邮件规则，这是我认为应该感兴趣的内容，我包含了一些 video 这样您就可以看到额外的 space 是如何发生的以及发生在何处。

Answer 1

<svg width="100%" height="100%" viewBox="100 0 600 1200">

您的视图框宽度为 600，高度为 1200。所以尝试为它指定一个较小的宽度和高度并检查

SVG (?) 导致白色 space

SVG (?) causing white space

html

css

whitespace

svg

background