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

Question

我有一个包含许多不同曲线的布局，可应用于全宽框的顶部 and/or 底部。我快到了，使用带有 clipPathUnits="objectBoundingBox" 的 SVG clipPath 元素，使用 CSS clip-path: url(#curve) 应用于框。但是，目前曲线按比例缩放，我希望它在宽度随框缩放时保持其高度。

这是我当前的代码：

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

我认为问题是使用 clipPathUnits="objectBoundingBox" 意味着虽然曲线总是从框的左边缘开始，并在右边缘结束（根据需要），但它的高度会随着关系的变化而变化到盒子的高度。我已将此处的高度设置为 100vw 以（几乎）看到它的实际效果。我需要让路径表现得像它当前从左到右的行为（始终适合盒子），但从上到下我想要曲线路径覆盖的相同高度，无论盒子高度如何。我感觉 X 轴需要 clipPathUnits="objectBoundingBox"，Y 轴需要 clipPathUnits="userSpaceOnUse"。我不认为这是可能的，但我一直在寻找另一种方法来解决这个问题。

Answer 1

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

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

也可以考虑固定高度但是需要使用preserveAspectRatio="none"

.box {
  height: 200px; /* this can be any height and it won't affect the curvature */
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" 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% 1000px no-repeat;
    /*        ^--- adjust this like you want (at least bigger than the height) */
  background:red;
}

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

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

How to apply SVG clipPath with CSS to one edge of div?

css

svg

clip-path