Masking
I am trying to mask an svg with a solid color. I know I can only mask with a gradient or an image. Is there another option to mask with a solid color?
29 Replies
you can always set gradient as solid color 😄
i'd need some more specific info about what you're trying to do to help here. Can you throw what you have in a codepen?
That doesn't work
should work as mask
Oh, I see
so, just repeat the same 2 times and it is solid
What do you mean?
black, transparent is a gradient
black, black instead of black, transparent
Oh
black is visable, transparent is masked
The color isn't showing up. I made it blue and it is still black.
youll have to show an example if it doesnt work as expected
How do I ad a code block to this chat?
codepen is the easiest, then we can see it live
https://codepen.io
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
you want to set an background on the element and use the svg as the mask 😉
ohw, that's something totaly diff
mask a color with a svg, not mask a svg with a color
That was my understanding and I tried that already. Maybe I did something wrong.
How do I set up the css?
on
.dfs-live-chat-wrap div.dfs-site-logoother option is to bring the inline svg in the html, then you can just change the fill color
We use an inject file for the html. I can't do it that way.
This is what the html looks like for the feature only.
Now I have a double image and I don't know why.
But that worked, thank you.
because of the 100px width
the image is shorter so it repeats
Okay
you can inject this instead of the image
https://codepen.io/MarkBoots/pen/rNrdmmz
Success! Thank you so much!
You're an angel!