Custom SVG not fully loading in Clip Bae Plugin
Hi everyone,
I've come across several posts here that seem to echo the issue I'm currently facing. When I upload a custom SVG file into the Clip Bae plugin, it doesn't fully display as intended. It appears as if the bottom part of my SVG gets cut off, not showing the complete image.
I've experimented with various online tools to create the clip-path, successfully achieving the full shape each time. However, the aspect ratio isn't preserved (though the plugin seems to respect this, unlike the code generated by third-party websites).
Could anyone offer advice on how to either adjust the plugin settings to accommodate the entire SVG file or ensure that the generated code maintains the correct aspect ratio? Your help would be greatly appreciated!
Here is my SVG file, and a screenshot.
2 Replies
I'm looking into this but it might be a little while. In the meantime you might try this tool!
https://www.plantcss.com/css-clip-path-converter
convert svg path to css clip path converter
The clip path property help us to clip the certain part or area of the element. This online converter helps us to convert svg path to css clip-path property values with scalable width or height. It means the shape or shape area is not stretched when content is exceed initial width or height.
@Web Bae Thank you for your response! I actually used that site to generate the clip-path shown above. However, for some reason, when I paste the code into the attributes in Webflow, it doesn't maintain the aspect ratio. This issue doesn't occur with your plugin, but unfortunately, the SVG file isn't displayed correctly. 😦