内联 SVG 填充 CSS 网格单元，忽略纵横比答案

【问题标题】：Inline SVG to fil CSS grid cell, ignoring aspect ratio内联 SVG 填充 CSS 网格单元，忽略纵横比
【发布时间】：2019-07-07 15:21:40
【问题描述】：

我正在使用内联 SVG 来呈现内容（对于游戏，如果它有任何区别的话）。我将通过javascript调整viewBox，所以我不关心维护外部svg元素的纵横比。

我在下面包含了一个精简到最低限度的演示 - 一个带有嵌套 SVG 元素的 CSS 网格。

问题是，当我加载演示并使浏览器变宽时，SVG 元素也会变高。如何保持 SVG 填充主要元素，而不会将页脚推离屏幕？

    <head>
        <title>SVG scale demo</title>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
                width: 100vw;
                height: 100vh;
                overflow: hidden;
            }

            body {
                display: grid;
                grid-template-rows: 3em 1fr 3em;
                grid-template-columns: 1fr 10em;
                grid-template-areas: "Header Header""Main Aside""Footer Footer"
            }

            svg {
                display: block;
                width: 100%;
                height: 100%;
            }

            header {
                grid-area: Header;
            }

            main {
                grid-area: Main
            }

            aside {
                grid-area: Aside
            }

            footer {
                grid-area: Footer
            }

        </style>
    </head>

    <body>
        <header> Header content </header>
        <main>
            <svg preserveAspectRatio="none" viewBox="-10 -10 20 20" xmlns="http://www.w3.org/2000/svg">
                <circle cx="0" cy="0" r="8" />
            </svg>
        </main>
        <aside> Side bar content </aside>
        <footer> Footer content </footer>
    </body>

</html>

我已经尝试了在 CSS 和 svg 元素中设置宽度/高度的各种组合，并且我已经将 preserveAspectRatio 属性添加到 svg 元素，现在我向你们寻求帮助。

【问题讨论】：

您确定要将 viewBox 设置为 viewBox="-10 -10 20 20" 吗？ -10 -10 是 x 和 y 的偏移量，表示 svg 从坐标（-10px，-10px）开始。通常 viewBox 设置为“0 0 x y”
是的，我希望 SVG 原点位于视口的中心

标签： html css svg

【解决方案1】：

嗯。看来我需要添加

overflow: hidden;

到主要的 CSS。

【讨论】：