How do I 'cover fit' this image to my Path?

Question

How do I properly display the profile picture inside this shape instead of making a cut of the image?

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

Currently it looks like:

But this is a cut of the image instead of 'fitting' it to the shape - I'm trying to achieve a 'cover fit'.

Michael Mullany · Answer 1 · 2019-02-05T09:34:52.420

0

Clip-paths are applied after the image is sized, so you have to position & size the image appropriately. Here is a pure SVG version that works the way I think you want it to:

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

edited Feb 05 '19 at 09:34

answered Feb 05 '19 at 01:02

Michael Mullany

30,283
6
81
105

Hey man thanks for replying. This is close but the shape has lost it's pointy edges on the 4 sides – Josh Feb 05 '19 at 01:07
Ok I tweaked the x/y/width/height to retain the points. Take a look. – Michael Mullany Feb 05 '19 at 09:34

How do I 'cover fit' this image to my Path?

1 Answers1