Html SVG（？）导致空白

首先，我使用的是SVG，虽然这已经有点困难，但我根本无法让背景图像工作，无论是通过CSS还是

img src

标记

SVG的一个已知漏洞是

填充底部漏洞

，但我对它们还不够熟悉。这是SVG的唯一工作方式，在Adobe Illustrator上复制形状，然后在Visual Studio代码上复制

CTRL+V

。我怎样才能去掉下面多余的空间呢

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

我真的希望有一种更简洁的方式向大家展示我的代码，但是有些SVG代码是围绕其他HTML内容编写的，因此它非常冗长乏味。我也知道粘贴CSS只会让事情变得更糟！！希望我没有违反任何垃圾邮件规则，这是我认为应该感兴趣的，我已经包括了一点，这样你就可以看到额外的空间是如何发生的，在哪里发生的

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

您的viewbox的宽度为600，高度为1200。

---

因此，尝试为其指定较小的宽度和高度，并选中

yep！完全正确。我忘了是我做的，真是个新手！！谢谢如果有效，请将问题标记为“关闭”。我猜“接受”您的答案会关闭它：o不确定，但我确实接受了。

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

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

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