Align `clip-path` to image - html

Question

I am having some issues using an SVG clip-path. I can't work out how to make the path align with the image I am clipping - it is always way off. This is my markup:
HTML
<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path d="M124.8,656.7H142V501.9c65.5-27.5,53.6,10.8,129,4.7v150.1h17.2v20.7H124.8V656.7z"/>
</clipPath>
</defs>
</svg>
SCSS
.svg-clipped {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
And a Codepen here:
https://codepen.io/mikehdesign/pen/yoOZYo
If you scroll down you will see the SVG outline I am using. Ideally I would like it to be centered on the image, though top left would be fine too. As it is I can't work out what the logic is behind the positioning.
Thanks!
Mike

Answer 1

When applying clip paths to HTML elements, it is highly recommended that you use the objectBoundingBox coordinate space rather than the default user space coordinates (userSpaceOnUse).
In objectBoundingBox units, the coordinates map directly to the object the clip is being applied to. So (0,0) means the top-left of the object, and (1,1) maps to the bottom-right of the object.
So if you stick to coordinates in that range, your clipping path is guaranteed to fall directly over your image.
Here's a demo with a simple diamond clip path. I'll you to do the conversion of your shape to objectBoundingBox coordinates.
.svg-clipped {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path d="M 0.5,0 L 1,0.5 0.5,1, 0,0.5 Z"/>
</clipPath>
</defs>
</svg>