如何自動將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> 

當我添加了width和height屬性，SVG的看起來非常小，但我想插圖縮放到容器的寬度。英雄波分區的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>