如何自动将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看起来很小但我希望插图缩放到容器的宽度。英雄波浪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%＆amp; height: auto选择器中的svg:not (:root )。检查下面的更新代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;