SVG被切断

Question

我所处的svg位于容器内，该容器占据页面底部的40％。这是因为图像的下半部分是不希望的。但是，作为副作用，svg在文本附近被切断了。我已经尝试过overflow: visible;，但没有成功。我还能尝试什么？这是代码：

HTML（使用了引导程序）：

    <header class="h-60 w-100 text-white hidden">
    <div class="container-fluid h-100 w-100">
        <div class="row h-100">
            <div class="container d-flex align-items-center justify-content-center w-100 h-100">
                <div class="col text-center w-100 heading">
                    <h1 class="reveal0">Ambrosia<h1>
                    <h3 class="reveal5">An Open-Source Website Theme</h3>
                    <br>
                    <a href="https://jaidevshriram.com" class="btn btn-light reveal15">See My Other Work!</a>
                </div>
            </div>
        </div>          
    </div>
</header>

<div class="container-fluid h-40">
    <div class="row h-100">
        <div class="container d-flex align-items-center justify-content-center h-100">
            <div class="col h-100 w-100 pic1">
            </div>
            <div class="col">
            </div>
        </div>
    </div>
</div>

CSS：

    .hidden {
    overflow: hidden;
}

.pic1 {
    position: fixed;
    background: url("../img/pic1.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    display: block;
    margin: auto;
    overflow: visible!important;
}

Answer 1

您可以使用：

background-size: contain

这将使您的图像变小，但不会被剪切。

或使用：

background-position: top

让它削减底部而不是顶部