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>

我如何“覆盖”此图像以适合我的路径？

1 个答案: