SVG获得切断

Question

我有位置的svg位于占据页面底部40％的容器内。这是因为图像的下半部分是不合需要的。然而，作为副作用，svg在文本附近被切断。我试过overflow: visible;但没有奏效。我还能尝试什么？这是代码：

HTML（使用Bootstrap）：

    <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

让它切割底部而不是顶部