我正在尝试使用 SVG 元素制作信息图，但我终究无法弄清楚如何让我的 SVG 适合视口(viewport)。无论我做什么，底部都会出现轻微的垂直滚动和小白线。</p>
代码笔:http://codepen.io/nicholasdrzewiecki/pen/zqEprw
HTML
<body>
<section class='landing'>
<svg viewBox='0 0 1920 1080'>
<rect id='background' class='cls-1' width='1920' height='1080' />
<g id='plane'>
<path id='big-wing' class='cls-2' d='M1741.6817,886.5c4.3571,4.359,24.6239,19.18,29.7965,16.7321,1.3751-.6478,86.5353-113.1255,87.6785-114.2692a14.1279,14.1279,0,0,0-19.9709-19.9793c-1.0873,1.0877-113.39,86.34-114.0292,87.6515C1722.6062,861.8422,1737.2845,882.1014,1741.6817,886.5Zm-130.3305,130.2815a13.997,13.997,0,0,0,19.787.24c1.1353-1.1437,113.5975-86.3078,114.2531-87.6915,2.43-5.1748-12.4159-25.482-16.789-29.849-4.4051-4.407-24.7038-19.1315-29.9-16.5961-1.3111.6478-86.4873,113.03-87.5826,114.1173A13.9917,13.9917,0,0,0,1611.3511,1016.7819Z'
/>
<path id='top-wing-shading' class='cls-3' d='M1690.8073,892.8133l-6.7679,8.78c-24.7278,32.16-72.1047,94.6019-72.92,95.41a14.0014,14.0014,0,0,0,.2318,19.7874,14.47,14.47,0,0,0,4.6609,3.1353l89.6425-114.4676Zm171.2354-118.9826a14.5057,14.5057,0,0,0-3.102-4.6309,14.1875,14.1875,0,0,0-8.9781-4.095h-2.1266a13.4992,13.4992,0,0,0-8.65,3.8791c-0.7755.7758-57.7461,44.0777-90.8524,69.52l-13.4417,10.3722,12.739,15.0059Z'
/>
<path id='small-wing' class='cls-3' d='M1809.2714,962.75c2.1786,2.1795,12.3119,9.59,14.8982,8.366,0.6875-.3239,43.2676-56.5628,43.8393-57.1346a7.064,7.064,0,0,0-9.9855-9.99c-0.5436.5439-56.6948,43.17-57.0146,43.8257C1799.7336,950.4211,1807.0728,960.5507,1809.2714,962.75Zm-65.1653,65.1408a6.9985,6.9985,0,0,0,9.8935.12c0.5676-.5719,56.7988-43.1539,57.1265-43.8457,1.2152-2.5874-6.2079-12.741-8.3945-14.9245-2.2026-2.2035-12.3519-9.5658-14.95-8.2981-0.6556.3239-43.2436,56.5148-43.7913,57.0586A6.9959,6.9959,0,0,0,1744.1061,1027.8909Z'
/>
<path id='plane-body' class='cls-4' d='M1696.2315,805.0315c13.2313,13.2449,163.4448,185.7005,149.8857,199.2734-13.5511,13.5808-185.75-136.864-198.9735-150.1089s-23.2088-45.2534-9.65-58.8342C1651.0451,781.7889,1683.0081,791.7946,1696.2315,805.0315Z' />
</g>
<text class='cls-5' transform='translate(314.0254 562.6257)'>MUSIC HAS BEEN SHOWN
<tspan x='774.7793' y='0'>T</tspan>
<tspan x='813.0117' y='0'>O IM</tspan>
<tspan class='cls-6' x='939.6572' y='0'>P</tspan>
<tspan x='977.9609' y='0'>ACT MOOD</tspan>
</text>
<path id='cloud' class='cls-7' d='M288.0351,50H180.753c-9.6733,0-17.9968,6.42-18.4518,14.7651-0.4858,8.91,7.7347,16.2652,17.9444,16.2652h0c4.3408,0,7.86,3.039,7.86,6.7879V91.697c0,3.7488-3.5189,6.7879-7.86,6.7879h-55.633c-9.6733,0-17.9968,6.42-18.4518,14.7651-0.4858,8.91,7.7347,16.2652,17.9444,16.2652h0c4.3408,0,7.86,3.039,7.86,6.7879v3.8788c0,3.7488-3.5189,6.7879-7.86,6.7879H68.4723c-9.6733,0-17.9968,6.42-18.4518,14.7651C49.5347,170.6445,57.7552,178,67.9649,178H175.2471c9.6733,0,17.9968-6.42,18.4518-14.7651,0.4858-8.91-7.7347-16.2652-17.9444-16.2652h0c-4.3408,0-7.86-3.039-7.86-6.7879V136.303c0-3.7488,3.5189-6.7879,7.86-6.7879h55.633c9.6733,0,17.9968-6.42,18.4518-14.7651,0.4858-8.91-7.7347-16.2652-17.9444-16.2652h0c-4.3408,0-7.86-3.039-7.86-6.7879V87.8182c0-3.7488,3.5189-6.7879,7.86-6.7879h55.633c9.6733,0,17.9968-6.42,18.4518-14.7651C306.4653,57.3554,298.2448,50,288.0351,50Z'
/>
</svg>
</section>
</body>
CSS
/* Imports */
@import url(https://fonts.googleapis.com/css?family=Dosis:300,500,700);
/* Elements */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
section {
margin: 0;
padding: 0;
}
svg {
height: 100%;
}
/* SVG Classes */
.cls-1 {
fill: #212121;
}
.cls-2 {
fill: #8e3a26;
}
.cls-3 {
fill: #aa4a2d;
}
.cls-4 {
fill: #e2d9d7;
}
.cls-5 {
font-size: 72px;
font-family: Dosis;
font-weight: 700;
}
.cls-5, .cls-7 {
fill: #e5e5e5;
}
.cls-6 {
letter-spacing: -2px;
}
/* Identifiers */
最佳答案
将 position: absolute 添加到 svg 会将其限制在窗口中。如果您只想摆脱底部的白色边框，svg 上的 display: block 应该可以解决问题。
编辑:
根据下面评论中的说明，您可以使用如下内容:
svg {
position: fixed;
height: 100%;
left: 50%;
margin-left: -88.888vh; /* Half of width / height */
}
@media (min-aspect-ratio: 16/9) {
svg {
height: auto;
left: 0;
width: 100%;
top: 50%;
margin-left: 0;
margin-top: -28.125vw; /* Half of height / width */
}
}
关于css - HTML5 SVG 100% 宽度和 100% 视口(viewport)高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36368844/