Как мне «подогнать» это изображение к моему Пути? - PullRequest
Новая
       26

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

0 голосов
/ 05 февраля 2019

Как правильно отобразить изображение профиля внутри этой фигуры вместо того, чтобы вырезать изображение? 

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

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

enter image description here

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

1 Ответ

0 голосов
/ 05 февраля 2019

Клип-контуры применяются после того, как размер изображения, так что вы должны соответствующим образом расположить и изменить размер изображения.Вот чистая версия 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>
...