有路径时如何修剪 SVG 的冗余部分答案

【问题标题】：How to trim the redundant part of SVG when having a path有路径时如何修剪 SVG 的冗余部分
【发布时间】：2022-01-14 20:19:14
【问题描述】：

我正在尝试创建一个波浪形的 SVG 来分隔登录页面的 Hero 部分和其他部分。这样做时，我注意到 SVG 显示的比路径本身大得多（这是波浪部分）。如何删除下面多余的空白部分，以便 SVG 仅具有包含波浪的足够大小？我在下面添加了一个带有红色边框的代码 sn-p 以显示下面的冗余空白。

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>

谢谢！

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：