我想将图像放在 svg 形状内并隐藏溢出部分

Question

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

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

<html>
<body>

  <div class="container">
     <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 class="image">
              <img src="https://dummyimage.com/403x602/000/efefef" width={403} height={602}/>
       </div>
  </div>
</body>
</html>

请不要介意图片的白色背景。如您所见，我想删除右下角的溢出部分。绿色区域是svg。我尝试使用 z-index 和 svg 剪辑路径。不幸的是，这些方法不知何故对我不起作用。非常感谢您的帮助。谢谢。

Answer 1

正如我在评论中告诉您的那样：您可以将图像放在 svg 中并使用路径剪切图像。

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

我想将图像放在 svg 形状内并隐藏溢出部分

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

html

css

web

svg