我有一个宽度和高度设置为100%的SVG,属性“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
答案 0 :(得分:4)
如果设置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 eg。
svg {
display: block;
}