レスポンシブSVGが正しく機能していませんか？

Question

SVGを反応的にするのに問題があります。私はこの質問（Resize svg when window is resized in d3.js）に提供されたソリューションを試しましたが、それは私のために働いていません。設定に関係なく、SVGはアスペクト比を維持しているようです。 （私はこのearlierに投稿しました。問題を整理するとその質問は削除されます）。

コンテキスト：これはElectronデスクトップアプリケーションとして実行されているフルスクリーンD3タイムライン用です。私は問題の実例を提供するためにすべてを取り除いた。下の画像は電子アプリからのものですが、ブラウザの動作は同じです.SVGは比例的にしかスケールされず、ウィンドウのアスペクト比がSVGのアスペクト比と一致しないとトリミングされます。

は私が起こるしたいもの：理想的には、私はSVGのサイズは、ウィンドウの幅に合わせて、高さを合わせてスケーリングされるように、垂直方向の寸法であることを「フレックススペース」をしたいと思います。

ここ

がworking, editable bl.ockあるとsame block full page

私はまだJSとD3を学んだ - と応答を処理するためのCSSの追加は非常に混乱してきているので、任意の助けを感謝しています。

---

1024×768のウィンドウサイズ

---

1400のx 900画面サイズ：SVGは

Answer 1

さてあなたは

0123を使用することができますが切り取られます

しかし、SVGの内容が伸びるので、あなたが望むものではないと思われます。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.svg-container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #ffff00; 
 
} 
 

 
.svg-content-responsive { 
 
    display: block; 
 
    background-color: #0000ff; 
 
}

<div id="container" class="svg-container"> 
 

 
    <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 984 728" 
 
     class="svg-content-responsive" overflow="hidden"> 
 
    <rect x="20" y="20" width="944" height="50" style="fill: rgb(255, 0, 0);"></rect> 
 
    <rect x="20" y="658" width="944" height="50" style="fill: rgb(0, 255, 0);"></rect> 
 
    </svg> 
 
    
 
</div>

Fiddle version

SVGsは異なり、親からの拡張部分を持つことができません。ですから、ストレッチが気に入らなければ、3つの別々のSVG、赤、緑、タイムラインを使ってそれらの間のセクションを埋めるようにしてください。