具有内联SVG的响应式剪切路径

Question

在具有背景（图像或纯色均可）的元素上：

<header id="block-header"></header>

我正在尝试使用SVG应用剪辑路径。为了实现这一点，我将SVG内联到与此元素相同的元素中，方法如下：

<header id="block-header">
    …
    <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
        <defs>
          <clipPath id="myClip">
            <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
          </clipPath>
        </defs>
    </svg>
    …
</header>

你可以运行下面的代码片段或查看JSFiddle。你可以看到原始的SVG图像（黑色）放在内联，底部呈现出曲线并具有响应性。相比之下，红色矩形显示了相同的图像作为clip-path被应用（或者说未被应用）的效果。

我猜我误解了viewBox或preserveAspectRatio属性，但无法找到具体错误所在。任何帮助将不胜感激。

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
 clip-path: url(#myClip);
}

<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>

<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
    <svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none">
        <defs>
          <clipPath id="myClip">
            <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
          </clipPath>
        </defs>
    </svg>
</header>

- spliter

Answer 1

参考SVG剪切路径是指剪切路径定义本身，<svg>的尺寸或其他属性在这种情况下无意义。在您的示例中发生的情况是，您正在将4000像素宽的剪切路径应用于标题。而标题可能只有大约900像素宽。所以曲率不可见。如果您想要一个响应式剪切路径，您应该使用clipPathUnits="objectBoundingBox"进行定义。

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
 clip-path: url(#myClip);
}

<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/></svg>

<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
    <svg width="0" height="0">
        <defs>
          <clipPath id="myClip" clipPathUnits="objectBoundingBox">
            <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
          </clipPath>
        </defs>
    </svg>
</header>    

这里查看示例代码

- Paul LeBeau

---

圆形、多边形等都可以正常工作。我怀疑你正在使用过大的值。当使用 clipPathUnits="objectBoundingBox" 时，坐标应该在0..1的范围内。将它们视为边界框的百分比。(0,0)是元素的左上角，(1,1)是元素的右下角。 - Paul LeBeau

但是，您如何将 d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z" 转换为 d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"？谢谢！ - Jordi Nebot

你需要将原始剪辑坐标按照视口比例进行缩放，例如1568/1696约等于0.9。然而，我的剪辑路径只是原始路径的近似值，不是完全一致的。 - Paul LeBeau

我找到了一个在线工具，你可以输入路径坐标，它会将其转换为对象边界框所需的分数/小数基础系统。这是链接地址：https://yoksel.github.io/relative-clip-path/ - Gavin Kemp

@GavinKemp 你真是救星，感谢你提供这个链接。 - joshmillgate