我正在寻找一种方法,将内联 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)内居中,例如这个:
最佳答案
我得到了这方面的帮助,并且能够通过将 overflow:visible;
添加到 SVG 来实现我正在寻找的东西:
svg {
overflow:visible;
width: 100vw; height: 100vh;
position:absolute;
top:0;
left:0;
}
关于html - 将 100% 宽度的 SVG 在 div 中居中而不切掉顶部和底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43926426/