将div中100％宽度的SVG居中，不会从顶部和底部切掉

Question

我正在寻找一种让内联SVG放置在容器div中心的方法，SVG的宽度为100％。然后，我希望SVG的顶部和底部显示在容器外部，而不会将这些部分切割到容器的边缘。

为了说明我的意思，这里有一个简单的草图： 我已将preserveAspectRatio="xMinYMid slice"添加到SVG中，让我将SVG置于容器中心。我对元素有以下CSS / HTML：

<div class="container">
    <svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 1000 595.3"  preserveAspectRatio="xMinYMid slice">
    ...
    </svg>
</div> 


.container {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

svg {
    width: 100vw; height: 100vh;
    position:absolute;
    top:0;
    left:0;
}

但是SVG部分的切片会从视口或div中掉出来。有没有办法让SVG具有100％的宽度，然后保留SVG的剩余顶部和底部，将它们放在div之外？

我希望将此实现为垂直幻灯片放映，每张幻灯片之间添加了距离，因此当用户转到下一张幻灯片时，SVG的顶部应该在转换过程中可见，然后将下一张幻灯片置于中间位置视口，像这样：

Answer 1

我得到了这方面的帮助，并通过将overflow:visible;添加到SVG来实现我想要的目标。