如何相对于容器定位剪辑路径？

Question

我想在我的图片上使用此clip-path。

但是我的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>