有路径时如何 trim SVG 的冗余部分

Question

我正在尝试创建一个波浪形的 SVG 来分隔着陆页的英雄部分和其他部分。在这样做的同时，我注意到 SVG 显示的比路径本身（这是波浪部分）大得多。如何删除下面多余的白色 space 部分，以便 SVG 的大小足以包含波浪？我在下面添加了一个带有红色边框的代码片段，以显示下面多余的白色 space。

svg {
  border: 1px solid red;
}

<svg viewBox="0 0 500 500" background="red">
   <path d="M0,50 C100,150 250,0 500,70 L500,00 L0,0 Z"></path>
</svg>

谢谢！

Answer 1

只需更改视图框值

svg {
  border: 1px solid red;
}

<svg viewBox="0 40 500 70" background="red">
   <path d="M0,50 C100,150 250,0 500,70 L500,00 L0,0 Z"></path>
</svg>

How to trim the redundant part of SVG when having a path