如何将带有CSS的SVG clipPath应用到DIV的一个边缘？

Question

我有一个布局，有许多不同的曲线应用于全宽框的顶部和/或底部。我几乎可以做到这一点，使用带有clipPath的SVGclipPathunits=“objectBoundingBox”元素，并使用CSSclip-path:url(#curve)应用到框中。然而，目前曲线比例缩放，我希望它保持它的高度，因为宽度与方框缩放。

下面是我当前的代码：

null

.box {

  height: 100vw;
  background-color: red;
  clip-path: url(#curve);

}

<div class="box"></div>

<svg>
    <defs>
        <clipPath id="curve" clipPathUnits="objectBoundingBox">
            <path d="M0 0.00880688C0 0.00880688 0.101517 -0.0152445 0.276014 0.0161458C0.474915 0.0519263 0.605365 0.0594333 0.727565 0.0493416C0.83584 0.0403992 1 0.0124763 1 0.0124763V1H0V0.00880688Z"/>
        </clipPath>
    </defs>
</svg>

null

我认为问题在于，使用clippathunits=“objectboundingbox”意味着，虽然曲线总是从框的左边缘开始，并在右边缘结束（根据需要），但它的高度会随着框的高度而变化。我将这里的高度设置为100vw，以（几乎）看到它的作用。我需要的路径的行为，就像它当前做的从左到右（始终适合框），但从上到下，我想要相同的高度覆盖的曲线路径，无论框的高度。我感觉我需要类似于clippathunits=“objectboundingbox”这样的东西来处理X轴，而对于Y轴则需要类似于clippathunits=“userspaceonuse”这样的东西。我不认为这是可能的，但我仍然需要另一种方法来处理这一点。

Answer 1

将其用作掩码，并将其宽度定义为100%和auto高度

null

.box {
  height: 200px; /* this can be any height and it won't affect the curvature */
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"><path d="M0 0.00880688C0 0.00880688 0.101517 -0.0152445 0.276014 0.0161458C0.474915 0.0519263 0.605365 0.0594333 0.727565 0.0493416C0.83584 0.0403992 1 0.0124763 1 0.0124763V1H0V0.00880688Z" fill="black"/></svg>') 
    top/100% auto no-repeat;
  background:red;
}

<div class="box"></div>