如何使用CSS实现SVG满屏显示及竖屏场景下的居中裁剪？

你可以直接替换原有CSS代码为以下内容即可实现需求：

<style type="text/css">
    .svg-container {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .svg-container svg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
</style>

各属性作用说明：

• height: 100vh：让容器占满整个视口高度，实现满宽满高显示
• overflow: hidden：裁剪超出容器范围的SVG内容，避免溢出显示
• flex相关属性：保证SVG始终在容器内居中对齐，防止裁剪区域偏移
• object-fit: cover：让SVG保持原有800:450的宽高比自动缩放，完全覆盖容器区域，不会出现拉伸变形
• object-position: center：指定缩放裁剪时始终以SVG中心为基准保留可见区域，竖屏状态下会自动裁剪左右两侧多余内容，横屏状态下自动适配铺满全屏

内容的提问来源于stack exchange，提问作者Kostas Gogas