svg - 如何将此图像“覆盖”到我的路径？

Question

如何在此形状内正确显示个人资料图片而不是剪切图像？

               <Svg
                    height="300"
                    width="300"
                >
                    <Defs>
                        <ClipPath id="clip">
                            <Path d="M136.5 85 189 136 136.5 187 84 136z" />
                        </ClipPath>
                    </Defs>

                    <Image
                        x="0"
                        y="0"
                        width="100%"
                        height="100%"
                        href={{ uri: "https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" }}
                        clipPath="url(#clip)"
                        preserveAspectRatio="xMinYMid meet"
                    />
                </Svg>

目前它看起来像：

但这是图像的剪裁，而不是“贴合”它的形状——我正在努力实现“封面贴合”。

Answer 1

在调整图像大小后应用剪辑路径，因此您必须适当地定位和调整图像大小。这是一个纯 SVG 版本，可以按照我认为您想要的方式工作：

<svg
 height="300px"
 width="300px">
  <defs>
<clipPath id="clip">
  <path d="M136.5 85 189 136 136.5 187 84 136z" />
</clipPath>
  </defs>

  <image x="28%" y="27%" width="35%" height="35%"
     xlink:href="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
     clip-path="url(#clip)"/>
</svg>