I would like to put an image inside svg shape and hide the overflow parts-CodePudding

.container{
  position: relative;
  width: 692px;
}

.image{
  position: absolute;
  width: 403px;
  height: 602px;
  top: 91px;
  left: 92px;
}

<html>
<body>

  <div >
     <svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z"
                            fill="green"/>
                    </svg>
                    
        <div >
              <img src="https://dummyimage.com/403x602/000/efefef" width={403} height={602}/>
       </div>
  </div>
</body>
</html>

Please don't mind the white background of image. As you can see, I would like to remove the bottom-right overflow parts. The green area is the svg. I tried with z-index and svg clip-path. Unfortunately those methods didn't work for me somehow. Help is much appreciated. Thanks.

CodePudding user response：

As I've told you in the comment: you can put the image inside the svg and clip the image with the path.

<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path id="thePath" d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z" fill="green" />

  <clipPath id="cp">
    <use href="#thePath" />
  </clipPath>

  <image clip-path="url(#cp)" href="https://dummyimage.com/403x602/000/efefef" width="403" x="100" y="100" />
</svg>