相关疑难解决方法(0)

在具有背景的元素上(图像或纯色并不重要):

<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图像(黑色),沿底部具有曲线并具有响应性.相反,红色矩形显示相同的图像(或者更确切地说,未应用)作为a 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 …