Using a SVG clipping mask on images

Hi

Is there a way to use and SVG clipping mask to clip an image?

I’ve found some sources pointing me to custom coding, but I can’t seem to find how… Any help?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Sure,

first you need to setup your svg by setting up the svg tag. Then inside the svg insert your clipPath mask and finally set up your image tag with a reference to your clip path.

your svg could look like this:

<svg width="500" height="500" viewBox="0 0 500 500">
  
  <!-- 🧠 svg clip path -->
  <clipPath id="clip-path">
    <path d="M22.154,108.389 L258.274,13.5 L449.156,151.421 L487.774,429.469 L211.933,472.5 L30.981,366.577 L22.154,108.389 z">
  </clipPath>
  
  <!-- 🧠 image hosted on Webflow + clip path reference -->
  <image clip-path="url(#clip-path)" xlink:href="https://uploads-ssl.webflow.com/5d4d5feb574a78115ed7fbb9/5d8e0d419fdd33f92394085b_kalen-emsley-Bkci_8qcdvQ-unsplash.jpg"  src="https://uploads-ssl.webflow.com/5d4d5feb574a78115ed7fbb9/5d8e0d419fdd33f92394085b_kalen-emsley-Bkci_8qcdvQ-unsplash.jpg" alt="Image" height="500" width="500" class="svg__image">  
    
</svg>

here is a codepen for you.
Hope that helps.

Thanks a lot!

Currently I’m trying to add an overlay on clipped path. How would go about this?

Codepen

What are the steps I would have to make to achieve this effect but with a SVG logo?

I have been trying to figure it out for 2 days now, with no luck.
It’s pretty clear how to do it with text, but not so obvious with an SVG…
Please help :slight_smile:

And how it goes? Thanks!

From what I see on your link, the CSS used to mask the text is

.mask {
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #fff;
}

I would try add a class “mask” to your SVG and see how it goes.

I have tried this:

<style>
.mask {
  mask-image: url(#mask);
  -webkit-mask-image: url(#mask);
}
</style>

But it just turns the svg and the background invisible :frowning:

Thank you for trying to help anyway :slight_smile:

@Robin_SL I think I came up with a solution for this. Please have a look and give it a try: https://discourse.webflow.com/t/responsive-svg-clipping-mask-on-image/155254

1 Like

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?

https://preview.webflow.com/preview/jindrichs-stunning-site?utm_medium=preview_link&utm_source=designer&utm_content=jindrichs-stunning-site&preview=f3a44d163e415402ac6d53b21823ad34&workflow=preview

Thanks Nadine for your tutorial, you safe me!