如何自动将内联 SVG 缩放到父容器的宽度和高度？

Question

我正在尝试使用 svg 构建一个波浪框。像这样的东西：

我在矢量应用程序中绘制了它，并将文档的大小设置为 500 x 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 中删除 width 和 height 属性时，我得到了一个非常大的插图版本，并且底部不断溢出：

我怎样才能让SVG适合那个灰色区域而不会溢出（灰色区域是英雄波容器）？

我对 SVG 非常陌生，并且我找不到任何指南来解释 SVG 在调整大小方面的工作原理。他们是否试图保持纵横比？如果有人能在这件事上对我有所了解，我将不胜感激。

编辑：如果我使纵横比相同，插图仍然会溢出父容器。

Answer 1

您可以为此在选择器中设置width: 100%& 。检查下面更新的代码片段。height: autosvg: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>