HTML5 SVG 100% ширина и высота экрана 100%?

Я пытаюсь сделать инфографику с помощью элемента SVG, и я не могу на всю жизнь понять, как заставить SVG соответствовать окну просмотра. Независимо от того, что я делаю, есть небольшая вертикальная прокрутка и небольшая белая линия на самом дне.HTML5 SVG 100% ширина и высота экрана 100%?

CodePen: 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 */

источник

2016-04-02 nicholasdrzewiecki

Добавление position: absolute к svg будет сдерживать его в окно. Если вы просто хотите избавиться от белой границы внизу, display: block на svg должен сделать трюк.

Edit:

На основании разъяснений в комментариях ниже, вы можете использовать что-то вроде следующего:

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 */ 
    } 
}

источник

2016-04-02 03:55:27

Белая граница исчезает, но есть еще вертикальная прокрутка. Я попытался возиться со всеми высотами и ширинами, но в итоге удалил их, потому что ни один из них не работал. http://codepen.io/nicholasdrzewiecki/pen/zqEprw http://s.codepen.io/nicholasdrzewiecki/debug/zqEprw – nicholasdrzewiecki

Первое решение, которое я предложил Удаляет прокрутки. –

Есть ли что-то, что мне не хватает? У меня все еще есть небольшая вертикальная прокрутка при добавлении позиции: абсолютная; к svg. – nicholasdrzewiecki

HTML5 SVG 100% ширина и высота экрана 100%?

ответ

Смежные вопросы