我有一个SVG，其宽度和高度设置为100％，属性“ preserveAspectRatio”设置为“ xMidYMid Meet”。
使用谷歌浏览器时，添加标记（将其设为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 height属性具有不同的默认值。只要您了解，这两种情况都“有效”，这只是您想要的一种情况。
您可能还想使svg元素显示：block例如
svg {
display: block;
}