Для элемента с фоном (изображение или сплошной цвет не имеют большого значения):

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