html - コンテナに対して相対的にクリップパスを配置する方法は?

Question

画像でこのクリップパスを使用したい。

しかし、私の svg パスは、絶対に配置された div.img-container に対して相対的に配置されません。

どうすればそれを達成できますか？

.img-container {
  position: absolute;
  top: 100px;
}
.svg-clipped {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

<div class="img-container">
  <img src="https://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" alt="Cherry Blossoms." style="position:relative" class="svg-clipped">

  <svg height="0" width="0">
    <defs>
      <clipPath id="svgPath">
        <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
                c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
                c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z" />
      </clipPath>
    </defs>
  </svg>
</div>