Как я могу добавить равную верхнюю и нижнюю маржу/прокладку в SVG в HTML -размере динамически с экраном? ⇐ Html

[Anonymous]

В настоящее время у меня есть SVG в HTML, который динамически имеет размер, так что его высота занимает весь экран без полос прокрутки. Я пытаюсь немного смягчить его и добавить равное количество пустого пространства между SVG и верхним и нижним краями экрана без введения полос прокрутки; Тем не менее, все мои попытки до сих пор представляют прокрутку, неравную маржу/прокладку сверху и снизу, и/или сдвиги вправо SVG (возможно). Мне также неясно, является ли маржа или заполнение семантически более подходящими (или что-то еще, полностью)-я планирую позже поместить анимированную форму волны SVG в в настоящее время в настоящее время форме бутылки, чтобы она выглядела так, как будто есть выплескиваемая вода бутылка. < /p>
Мой текущий код, который помещает SVG без расстояния: < /p>






* {margin: 0; box-sizing: border-box;}
.container {justify-items: center;}
svg {display: block; height: 100dvh;}











< /code>
< /div>
< /div>
< /p>
Установка маржи на 5dvh и высота блока SVG CSS до 90DVH сдвига Изображение внизу, представляя полос прокрутки, и, кажется, имеет неравную заполнение/маржу вверху и внизу:






* {margin: 5dvh; box-sizing: border-box;}
.container {justify-items: center;}
svg {display: block; height: 90dvh;}











< /code>
< /div>
< /div>
< /p>
Установка зама Блок SVG CSS не приводит к прокрутке, но приводит к неравной прокладке вверху и внизу: < /p>






* {margin: 0; box-sizing: border-box;}
.container {justify-items: center;}
svg {display: block; height: 90dvh; padding: 5dvh;}











< /code>
< /div>
< /div>
< /p>
Я также попытался сделать заполнение 10px вместо 5DVH в приведенном выше примере , но это также не приводит к равным заполнению вверху и снизу.


Подробнее здесь: https://stackoverflow.com/questions/794 ... zed-dynami