Border on custom SVG mask

jindrich_stanek · February 18, 2022, 3:16pm

Hi,
Im trying to get stroke/border on custom SVG mask but Im doing something not right,
could you give me some idea please what can I do?

Here is my site Read-Only: Webflow - Jindrich's Stunning Site

(how to share your site Read-Only link)

ColemanChrisB · February 18, 2022, 9:48pm

Hi jindrich_stanek,

I haven’t had to approach this myself, but did find a couple of methods listed here. Overall, it seems that for complex shapes, the simplest solution is to essentially draw two shapes, one slightly larger than the image element to act as a “border”. Hope this helps!

jindrich_stanek · March 10, 2022, 1:24pm

Hi all
In the end I got paid help with the code which works nicely, but I just found out that the whole SVG thingy doesnt work in the EDITOR at all, it shows me empty space any idea?

https://preview.webflow.com/preview/svg-mask-stroke?utm_medium=preview_link&utm_source=dashboard&utm_content=svg-mask-stroke&preview=a12a268d26695a8e99f20486189f73e0&workflow=preview

ColemanChrisB · March 10, 2022, 5:10pm

Hey! Thanks for the update. What are you seeing in the designer exactly? When I load up, here’s what I’m seeing, which appears to be the same as the published site.

jindrich_stanek · March 10, 2022, 6:59pm

Hi , the issue is at the end user EDITOR mode, the DESIGNER and the publish result are good. At the EDITOR is a blank space instead of image, due the mask webflows editor cant recognise image I guess.