我正在使用内联 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 元素，现在我向你们寻求帮助。
最佳答案
嗯。看来我需要添加
overflow: hidden;
到 main 的 CSS。
关于html - 内联 SVG 以填充 CSS 网格单元，忽略纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56919509/