我有一个 SVG，宽度和高度设置为 100%，属性“preserveAspectRatio”设置为“xMidYMid meet”。
使用 google chrome，在添加标签(使其成为 HTML5)后，行为会发生变化。 SVG 元素不会占据页面的所有空间，SVG 的高度自动按宽度比例设置。
没有 DOCTYPE 的 HTML - 按预期工作
<html>
<head>
<style>
body{
padding:0;
margin:0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
style="width:100%;height:100%;background-color:#0f0"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 150">
<rect
x="11"
y="11"
width="80"
height="130"
style="stroke: #000000; fill:none;"/>
</svg>
</body>
</html>带有 DOCTYPE 的 HTML - 不工作
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
padding:0;
margin:0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
style="width:100%;height:100%;background-color:#f00"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 150">
<rect
x="11"
y="11"
width="80"
height="130"
style="stroke: #000000; fill:none;"/>
</svg>
</body>
</html>注意::内联结果片段可能不正确，请引用 Plunker
最佳答案
如果您设置 html 和 body 元素的宽度和高度，无论是否存在 html DOCTYPE，您都可以获得任一结果
body, html {
padding:0;
margin:0;
height: auto;
width: 100%;
}
或
body, html {
padding:0;
margin:0;
height: 100%;
width: 100%;
}
传统渲染只是对默认的 html 高度属性有一个不同的默认值。如果您了解这一点，这两种情况都“有效”，只是您想要哪一种情况。
您可能还想使 svg 元素显示:例如 block
svg {
display: block;
}
关于html - SVG - 百分比高度和宽度在 HTML5 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32461835/