html - 如何自动将内联 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>

当我添加 width 和 height 属性时，SVG 看起来很小，但我希望插图能够缩放到容器的宽度。 hero-wave div 的 css 如下所示

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

如何使 SVG 完美适合容器，而不会溢出。当我从 SVG 中删除 width 和 height 属性时，我得到了一个非常大的插图版本并且底部不断溢出:

我怎样才能使 SVG 适合那个灰色区域而不会溢出(灰色区域是 hero wave 容器)？

我是 SVG 的新手，我找不到任何指南来解释 SVG 在调整大小方面的工作原理。他们是否试图保持纵横比？如果有人能就此事向我说明，我将不胜感激。

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

Answer 1

您可以为此在 svg:not(:root) 选择器中设置 width: 100% 和 height: auto。检查下面更新的代码段。

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