内联SVG的响应式剪切路径

内联SVG的响应式剪切路径

对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><pre>clip-path</pre> 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>