内联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>

Answer 1

对SVG剪切路径的引用是对剪切路径定义本身的引用，并且SVG的尺寸或其他属性<svg>在此上下文中没有意义。

在您的示例中发生的情况是，您将4000 px宽的剪切路径应用于标题。大概只有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>