Custom Shape SVG for Masking Images

[joseagazzo (José Antonio Gazzo Castañeda)]

@youngandhyperactive ello Webflow community,

I hope you’re all doing well. I’m currently working on a project where I want to use a custom shape SVG to mask an image in the center. I have followed the instructions provided in this forum post by @youngandhyperactive

Responsive SVG Clipping Mask on Image

Hey everyone, I recently struggled with an issue, which I found a lot of you have in common: How to clip an image with a custom svg shape in webflow? It is easy and well documented with text though, but it really bothered me to find a propper solution for svg shapes. Therefore, I tried for myself (even if i’m not a developer) and after a few hours of research, try and error I came up with this: https://share.getcloudapp.com/bLug6BEo It is really a svg shape, not only an png image. And…

But I’m encountering some difficulties in getting the shape to sit perfectly centered on the image. Despite my efforts its stuck in the top left corner.

Here’s a summary of the steps I’ve taken so far:

I created a custom shape SVG in Figma.
I copied the SVG-Code.
I pasted it in the HTML Embed element like the other page suggests.

However, despite my efforts, the shape does not align properly with the center of the image. I have tried adjusting the CSS properties and experimenting with different approaches, but I haven’t been able to achieve the desired result.

I would greatly appreciate any guidance or suggestions you could provide to help me resolve this issue. Is there a specific CSS property or technique I should be using to ensure the custom shape sits perfectly centered on the image it’s supposed to mask?

Thank you in advance for your assistance. I look forward to hearing from the knowledgeable members of this community.

Best regards,
PepeGazzo

---

Here is my site Read-Only: Webflow - PRIME

[Romuald_Jay]

1 create a relative bloc that old the image and the SVG.
2 set the svg to absolute
3 make a transform on the SVG -50% on x -50%

Like this the reference point for positiontionig the svg will be the center and no more the top left.

4 set the absolute position on 50% left and 50% top

Like this the svg will be in the center of the parent : the relative dv bloc with a reference point in the center. So now the div in relative position could be responsive and the svg will be centered in any case.

Have fun Pepe