html - 将 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 部分的切片从视口(viewport)或 div 中掉了出来。有什么方法可以让 SVG 具有 100% 的宽度，然后保留 SVG 的剩余顶部和底部，将它们放在 div 之外？

我想将其实现为在每张幻灯片之间添加距离的垂直幻灯片放映，因此当用户转到下一张幻灯片时，SVG 的顶部应该在过渡期间可见，然后才能将下一张幻灯片置于视口(viewport)内居中，例如这个:

Answer 1

我得到了这方面的帮助，并且能够通过将 overflow:visible; 添加到 SVG 来实现我正在寻找的东西:

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