将 100% 宽度的 SVG 居中在 div 内而不切掉顶部和底部

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 来实现我想要的：

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