SVGをビューポート（コンテナdiv）に伸ばすAspect Ration Setを無視ViewBox

Question

これはjsbinのインラインsvgです。である（ビューポートの幅を取っているが、それは、ビューポートの高さを取得していない、とSVGの高さを超えたホワイトスペースがあることを、outputから明らかなように

<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> 

：それはのようになります開発ツールを開いてiPadのビューをエミュレートするか、クロムで全画面表示すると明らかです）。予想に必要なのは、svgをビューポートに合わせることです。

SVGは、パスフォトフレームと電球がsvgビューボックス座標全体に関連するようにエクスポートされています。そのため、個々のパスを切り離してプラグアンドプレイするオプションはありません。これはモバイルビューには必要です（つまり、ビューボックスサイズに結合されています）。

デスクトップ版atleastの場合、ビューポートの幅とサイズを取得するにはどうすればよいですか。

Answer 1

あなたはこれはしかし、あなたの縦横比を台無しに起こっているheight

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

ためvh値を設定することで、ビューポートの高さを埋めるために、あなたのSVGを得ることができます。あなたはアスペクト比を維持するか、SVGをスクリーン全体に埋めるようにする必要がありますか？

（また、あなたはデフォルトのマージンbody {margin: 0;}を取り除くしたい場合があり、画面全体を埋めることを確認する）