Kevin Powell - Community•11mo ago

Create an underline effect using clip-path and svg

Happy new year to everyone! I've been working a lot with svg, maybe not in the best way, but lately I've discovered the clip-path property and now I'm trying to figure out how it works. I'm trying to add this svg -that pretends to underline some words-to a <span> that wraps the text that I want to underline, which is inside of an h1 tag. The problem is that I can't see the svg, no matter which way I try. I believe that maybe the problem is related to some canva stuff but since I'm new to clip-path I dont know how to manage that. By now I've tried: - Adding the svg using clip-path: url(''); This url should be correct bc I've used it on some other files when adding svgs with ::before and ::after; - Adding an id like this: <clipPath id="svgClipPath"> and passing this id to the url: clip-path: url(#svgClipPath). - Coping the path value from the svg and adding it to the path value on clip-path as you can see on the file I attached. P.S.: The svg is uploaded as an png bc discord didn't let me upload it as an svg. The text I attached is the file where I'm working, where I'm using cobalt, so the file has a .liquid extension. Any source to know more about clip-path will be really appreciated! Thanks in advance for reading me 🙂

message.txt

8 Replies

clevermissfox•11mo ago

Does it have a fill or stroke value ? What element are you adding the clip-path onto?

ail3ngrimaldiOP•11mo ago

The clip-path is being added to a <span> element. The fill property was on the svg. I also tried using background-color, which I'm not sure if was the right thing to do. I don't know where to add the fill property with the way Im adding the path rn.

ail3ngrimaldiOP•11mo ago

I would also like to add this image, when I add the path on clip-path it looks like this:

ail3ngrimaldiOP•11mo ago

I have more updates for this, with the background property I was able to add color to the path, now the problem is that I cant see the text, the only thing I see is the path even using a z-index: -999 I'll try some things that Chat-gpt suggested and then get the updates here in case anyone is struggling with clip-paths too.

clevermissfox•11mo ago

That’s because you’re clipping your text into that shape. You probably want to give your text a pseudo element and apply the clip path on that. I can’t open your file with that extension. Z-index isn’t going to help as you’ve clipped away your text. A negative z index won’t help for anything you want to see, that would put it at the bottom layer. Also zindex doesn’t work without a position property and gets tricky with stacking context gotchas.

ail3ngrimaldiOP•11mo ago

am i supposed to add the path in the content property or where? looked up on google but still got no answers at least not working ones.

clevermissfox•11mo ago

like you've been doing most likely.

span::before {
  content: '';
  width: 100%; 
  height: 4px;
  background-color: green;
  clip-path: url(#myClipPathId);
}

span::before {
  content: '';
  width: 100%; 
  height: 4px;
  background-color: green;
  clip-path: url(#myClipPathId);
}

put it on the clip-path property then youll need to position the pseudo element underneath the span where you want it

ail3ngrimaldiOP•11mo ago

Awesome, thank u!

Gaming

Programming

Create an underline effect using clip-path and svg