Растянуть SVG To Viewport (контейнер div) Без учета Аспекта Ration Set By viewBox

Question

У меня этот встроенный svg на jsbin. Это выглядит примерно так:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve" width="100%" height="100%" preserveAspectRatio="none"> 
// different svg element groups and paths 
</svg> 

Как видно из output, что он принимает ширину окна просмотра, но он не получает высоту окна просмотра, и есть белое пространство за пределами высоты SVG (который очевидно, если вы откроете инструменты dev и эмулируете iPad-представление или перейдите в полноэкранный режим на хром). То, что необходимо от ожидания, состоит в том, чтобы svg соответствовал окну просмотра.

SVG был экспортирован таким образом, что дорожные фоторамки и луковицы относятся к целым координатам окна просмотра svg. Из-за чего у меня нет возможности выделять отдельные пути и подключаться к ним с ними, что необходимо для мобильного просмотра (Do I?), То есть они связаны с размером viewBox.

Как я могу получить svg для получения ширины и размера видового экрана, для настольной версии по крайней мере.

Answer 1

Вы можете получить SVG заполнить высоту окна просмотра, установив значение vh для height

svg { 
    height: 100vh; /* Fill entire viewport height */ 
} 

Это будет возиться с соотношением сторон, хотя. Вам нужно поддерживать соотношение сторон или просто получить SVG для заполнения всего экрана?

(также, чтобы убедиться, что вы заполнить весь экран, который вы могли бы хотеть, чтобы избавиться от края по умолчанию body {margin: 0;})