Custom Shape SVG for Masking Images

@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

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,

Here is my site Read-Only: Webflow - PRIME

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