インラインSVGを親コンテナの幅と高さに自動的に拡大する方法は？

Question

私はsvgを使用して波形のボックスを構築しようとしています。このような何か：

私はベクトルのアプリケーションでそれを延伸し、今500×200に文書のサイズを設定している、私は、インラインSVGタグにSVGの内容をコピーします。だから、全体的なマークアップは次のようになります。私は幅を追加し、高さの属性をすると

<div class="hero-wave"> 
    <svg width="100%" height="100%" viewBox="0 0 500 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <g fill="none" fill-rule="evenodd"> 
      <path d="M0,0.8828125 C0,0.8828125 21.5375284,2.70107724 30.175,8.11815895 C70.4419893,33.3720274 173.689709,104.747595 239.525,104.747595 C306.457042,104.747595 408.933103,43.7500826 451.921875,21.6893757 C494.910647,-0.371331192 500,8.11815895 500,8.11815895 L500,200.882812 L0,200.882812 L0,0.8828125 Z" id="Rectangle" fill="#595CA5"></path> 
     </g> 
    </svg> 
</div> 

、SVGは非常に小さく見えますが、私はイラストがコンテナの幅に拡張します。 hero-wave divのCSSは次のようなものです

.hero-wave { 
    position: absolute; 
    bottom: 20px; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    height: 20%; 
} 

SVGをオーバーフローせずに完全にコンテナにフィットさせるにはどうしたらいいですか？私はSVGから幅と高さの属性を削除すると、私はイラストの非常に大きなバージョンを取得し、底があふれ続けて：

SVGがなくても、その灰色の領域に収まるように、私はそれを作ることができますどのように

溢れている（灰色の領域は英雄の波の容器です）？

私はSVGについて非常に新しく、SVGがサイズ変更の仕方でどのように機能するかを説明するガイドがありません。アスペクト比を維持しようとしていますか？誰かがこの問題について私に光を当てることができるなら、私は本当にそれを感謝します。

編集：アスペクト比が同じになるようにすると、図はまだ親コンテナよりもオーバーフローします。

Answer 1

width: 100% & height: autoをsvg:not (:root)セレクタに設定することができます。下記の更新されたスニペットを確認してください。

.hero-wave { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 0px; 
 
    right: 0px; 
 
    width: 100%; 
 
    height: 20%; 
 
} 
 
svg:not (:root) { 
 
    width:100%; 
 
    height: auto; 
 
}

<div class="hero-wave"> 
 
    <svg width="100%" height="100%" viewBox="0 0 500 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
     <g fill="none" fill-rule="evenodd"> 
 
      <path d="M0,0.8828125 C0,0.8828125 21.5375284,2.70107724 30.175,8.11815895 C70.4419893,33.3720274 173.689709,104.747595 239.525,104.747595 C306.457042,104.747595 408.933103,43.7500826 451.921875,21.6893757 C494.910647,-0.371331192 500,8.11815895 500,8.11815895 L500,200.882812 L0,200.882812 L0,0.8828125 Z" id="Rectangle" fill="#595CA5"></path> 
 
     </g> 
 
    </svg> 
 
</div>