Как мне "подогнать" это изображение к моему Пути?

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>

В настоящее время это выглядит так:

https://sta ckru.com/images/5d874bd278d98d8c8493fd85ff659fa29c61874a.png

Но это разрез изображения вместо "подгонки" его к форме - я пытаюсь добиться "подгонки обложки".

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>