Clip path being cut out at top and bottom
Hi @Web Bae ,
I am trying to clip-path image using custom svg. It's working fine but path has been cut out at the top and bottom.
Here is ready-only link:
https://preview.webflow.com/preview/inbloom-v1?utm_medium=preview_link&utm_source=designer&utm_content=inbloom-v1&preview=d68ac1a8b33b0f268354016d3d59fd5c&pageId=65f4e245ffd8e23f67b1c2fe&workflow=preview
I have attach the svg as Zip file.
5 Replies
@Dilshad thanks for sharing - I'll look into this!
For the mean time I converted the svg to a clip path... see below
Thanks @Web Bae
I notice that your app using
clipPathUnits=objectBoundingBox in clipPath tag and convert path between 0-1 to make clip responsive.
I used transform(1/widthOfSvg, 1/heightOfSvg) style on clipPath and keep the original path. So this did the trick and now the clip is working and also it's responsive.
Here is more detail about that:
https://stackoverflow.com/a/54090749Stack Overflow
Convert SVG path data to 0-1 range to use as clippath with objectBo...
I'm using a rather complex SVG shape exported from Illustrator as a clipping path.
The problem is that objectBoundingBox requires path data to be within the 0-1 range, and my path contains path d...
Thank you for sharing!