I'm quite struggling with this one. I found an article with this: https://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/
, I alredy tried the steps. The problem is that I'm using blob as the maskBackground
, I'm having some problems with the paths. I wanted to achieve the pop-out effect using the svg I have.
Here's my svg:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#FF0066" d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
</svg>
Here's the full svg:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="image">
<defs>
<clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
<path d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
</clipPath>
<clipPath id="maskBackground" clipPathUnits="userSpaceOnUse">
<path d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
</clipPath>
</defs>
<g clip-path="url(#maskImage)" transform="translate(0 -7)">
<!-- Background image -->
<image clip-path="url(#maskBackground)" width="120" height="120" x="70" y="38" href="./resources/images/blob.svg" transform="translate(-90 -31)" />
<!-- Foreground image -->
<image width="120" height="144" x="-15" y="0" fill="none" class="image__foreground" href="./resources/images/dog.png" />
</g>
</svg>
In the next example I'm simplifying your code.
In order to know the size of the bounding box of the path used for the clipping I'm using the getBBox() method. This is giving me
"x": -72.25780487060547,
"y": -48.919960021972656,
"width": 136.5255584716797,
"height": 121.35723876953125
The image should be the same size or bigger. In this case I'm using an image width="200" height="252".
Since the path used for clipping has "x": -72.25780487060547 and "y": -48.919960021972656, I'm giving the image a negative x and y similar to the x and y of the bounding box of the clipping path.
It helps, as a debugging method, to to draw the clipping path over the image. This would help you visualize the result you intend to achieve.
Finally, after clipping, I'm translating the image where I intend it to be.
//console.log(m.getBBox())
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="image">
<defs>
<clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
<path id="m" d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" />
</clipPath>
</defs>
<!-- Background image -->
<image clip-path="url(#maskImage)" width="200" height="252" x="-73" y="-49" href="https://assets.codepen.io/222579/imgres.jpg" transform="translate(100 50)" />
</svg>